javascript - 检查 chrome 扩展时的奇怪行为

Question

我有一个通过单击扩展图标运行的脚本 - 它应该获取标签 URL，将其发布到远程服务器，获取一些列表作为响应。对于某些网站，一切正常，但对于其他一些网站 - 它只显示第一行，即“URL：blabla.com”（它仍然正确发布）。现在，当我尝试调试它时 - 右键单击​​，检查元素并得到我的列表（虽然它不显示带有“URL：”的行）。

现在我的问题 - 为什么？

代码：

 chrome.tabs.getSelected(null,function(tab) {
   var tablink = tab.url;
    document.write("<p>"+ "URL: "+ tablink +"</p>");
    document.write("<p>"+ "Lists: </p>");
    var myData = { url: tablink };
    $.ajax(
            {
            url: 'http://127.0.0.1:8000/addon/',
            type: "post",
            data: myData,
            success: function(response){

            document.write("<p>"+ "Response: "+ response.id +"</p>");
                ...

编辑：我通过使用 .append() 而不是 document.write() 解决了这个问题，但问题仍然可以进一步参考 - 为什么以及如何“检查元素”与常规弹出式打开点击不同......