Javascript chrome扩展——将div附加到正文中，不使用类似facebook的按钮

我正在创建一个chrome扩展，到目前为止我已经成功了。作为最后一项功能，当用户单击我的扩展面板中的“关于”部分时，我尝试在当前打开的选项卡/页面的主体上附加一个div（显示关于我个人网站的一个小的、无刺激性的广告）。我也让它工作了

但问题是，如果主页包含类似facebook或twitter的follow小部件，则该div不会附加到主页的body标签。相反，它被附加到上述小部件的iframe中的body标记

当我检查这些页面的dom结构时，这些小部件在iframe中创建自己的html>body结构。这就是导致这个问题的原因

我尝试将此div附加到第一个body元素，如下所示：

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

在上面的第2条语句中，我希望它能附加到第一个标记上，而不是附加到内部标记上

不幸的是，这也不起作用。我可以看到它连接到facebook/twitter小部件，而不是主。我所做的有什么不对吗

---

编辑

从@stan的评论中，我可以在带有facebook/twitter小部件的页面（即带有iframes的页面）上解决这个问题。现在，我的代码如下所示：

document.body.appendChild(adDiv);

--谢谢你，斯坦

但现在我面临另一个问题。在某些站点（如）中，div未出现在页面中。实际发生的情况是，div被连接到身体上，但同时它也被移除了。只有在html检查器（本例中是chrome的检查器）的帮助下才能看到它

div（adDiv）附加到标记中的主体并消失就好像它无法将自己绑定到身体上。结果：页面中没有显示任何内容

知道为什么会这样吗？它只发生在少数像上面所说的网站上

---

background.js

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

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);
    }
}

content.js

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

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);
    }
}

---

对于问题的第一部分，您可能应该尝试

document.body.appendChild

。[结果证明，它运行良好。]

对于问题的第二部分，我用您的代码做了一个测试扩展（只是添加了一些东西来定义div），它在上运行得非常好，也就是说，单击操作按钮后，我在页面底部看到了div。请确保您的浏览器中没有任何其他扩展插件-禁用所有其他扩展插件。下面是我如何定义div（这可能也很重要）：

正如你所说，这个问题偶尔出现（我也无法重现），我想很难截获它。作为一种解决方法，您可以尝试观察DOM，并在每次它似乎丢失时重新创建div，类似于：

setInterval(createDivIfDoesNotExist, 1000);

---

您也应该考虑为自己的广告设置另一个位置，例如，只需显示一个弹出窗口，它通过清单来绑定到浏览器动作，并且不会通过浏览器事件监听器来改变外部页面。

您需要提供一些无法工作的站点，因为我不能复制它。我试过了，但运气不好。在每页上只能找到一个

。我还尝试等待页面完全加载（这样我就可以确定所有的社交小部件都已加载），但我仍然从

document.getElementsByTagName（'body'）

中获得了一个

。您可以尝试

document.body.appendChild

？@Stan，这就成功了。谢谢但在某些站点（比如）中，我可以看到div在同一时刻被连接和删除。我在使用chrome的html检查器时注意到了这一点。我可以在标记中看到div被附加到主体上，但同时它被删除了。结果：页面中没有显示任何内容。知道为什么吗？如果这只发生在特定的站点上（并且在所有其他站点上工作），我认为您应该分析它们的Java脚本。也许，如果你把你的孩子附加到网站脚本完成工作的时候，你可能会成功。如果脚本确实监视DOM更改，您应该以某种方式阻止它们进入扩展，但这当然会破坏站点的正常行为。但是我们扩展的JS代码不是在完全隔离的环境中工作吗？如果是这样，我如何阻止或处理网站的JS？我无法用你们的补丁修复第二个问题。该问题仅在该页面上随机出现。该页面中唯一改变的是广告框架。所以我猜它是由那些广告小部件引起的。“你对这种随机行为有什么看法？”鹅在回答中补充道。