Chrome扩展名 - 将DIV附加到body上不使用Facebook，例如按钮

Question

我正在创建一个Chrome扩展名，到目前为止我已经成功了。作为最后一个功能，我试图将DIV附加到当前打开的选项卡/页面主体上时，当用户单击"我的扩展"面板中的大约部分时。我也可以工作。

但是问题是，如果该页面包含Facebook或Twitter之类的widtget，则该DIV不会附加到主页的主体标签上。取而代

当我检查此类页面的DOM结构时，这些小部件在iframe内创建自己的HTML>车身结构。这就是引起这个问题的原因。

我尝试将此div连接到第一个身体元素，如下所示：

var mainbody = document.getElementsByTagName('body');
mainbody[0].appendChild(adDiv);  --> adDiv = new element I created above this code with its own properties

在上述第二语句中，我期望它将其附加到第一个标签上，而不是在内部标签上。

不幸的是，这也无法正常工作。我可以看到它已连接到Facebook/Twitter小部件而不是主要小部件。我在做什么有什么错？

---

编辑

从 @stan的评论中，我能够使用Facebook/Twitter窗口小部件（即带有iFrame的小部件）在页面中解决该问题。现在我的代码看起来像这样：

document.body.appendChild(adDiv);

- 谢谢Stan。

，但是现在我正在面对另一个问题。在某些站点（例如http://www.glassdoor.com/index.htm）中，div没有出现在页面中。实际发生的是，DIV已依附于身体，但在同一时间也被删除。只能在HTML Inspector（在这种情况下Chrome的检查员）的帮助下看到它。

div（addiv）在标记中附着在身体上，并消失。好像它无法将自己绑定到身体。结果：页面中没有任何内容。

知道为什么会发生这种情况吗？它仅发生在少数站点，如上所述。

---

背景.js

chrome.browserAction.onClicked.addListener(function(tab){
    chrome.tabs.sendMessage(tab.id,{clicked:1});
});

content.js

chrome.extension.onMessage.addListener(function(request,sender,sendResponse){
    if(request.clicked==1){
        /* Create adDiv and apply style to it using JS */
        document.body.appendChild(adDiv);
    }
}

Answer 1

对于问题的1-ST部分，您应该尝试document.body.appendChild。[事实证明它运行良好。]

对于问题的2 nd部分，我用您的代码进行了测试扩展（只需添加一些内容以定义DIV），并且可以在http://www.glassdoor.com/index.htm上完美工作。，那就是我在单击"动作"按钮后看到页面底部的DIV。请确保您的浏览器中没有其他扩展 - 禁用所有其他扩展。这是我定义div的方式（这也可能很重要）：

var adDiv = document.createElement('div'); 
adDiv.id = "idadv"; 
adDiv.style.width = "200px"; 
adDiv.style.height = "100px"; 
adDiv.style.display = "block"; 
adDiv.style.backgroundColor = "blue";

正如您所说的那样，这个问题偶尔出现（而且我也无法再现），我想很难拦截它。作为解决方法，您可以尝试观看DOM并每次失踪时重新创建DIV，类似的东西：

setInterval(createDivIfDoesNotExist, 1000);

还应该考虑您的自我AD的另一个位置，例如，只显示通过清单绑定到浏览器动作的弹出窗口，并且不要通过browseraction的事件侦听器更改外部页面。