chrome 扩展 - 将 div 附加到 body 不能与 facebook 按钮一起使用

Question

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

但问题是，如果该页面包含 facebook like 或 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

通过上面的第二条语句，我希望它附加到第一个标签而不是内部标签。

不幸的是，这也不起作用。我可以看到它连接到 facebook/twitter 小部件而不是 main 。我在做什么有什么问题吗？

---

编辑

根据@stan 的评论，我能够在带有 facebook/twitter 小部件（即带有 iframe 的小部件）的页面中解决问题。现在我的代码如下所示：

document.body.appendChild(adDiv);

-- 谢谢斯坦。

但现在我面临另一个问题。在某些网站（如http://www.glassdoor.com/index.htm）中，div 没有出现在页面中。实际发生的是，div 正在连接到身体，但同时它也被移除。只能借助 html 检查器（本例中为 chrome 的检查器）才能看到。

div(adDiv) 在标记中附加到正文并消失。 它好像无法将自己与身体绑定。结果：页面中没有出现任何内容。

知道为什么会这样吗？它只发生在像上述那样的少数网站。

---

background.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

对于问题的第一部分，您可能应该尝试document.body.appendChild。 【原来效果不错。】

对于问题的第二部分，我用你的代码做了一个测试扩展（只是添加了一些东西来定义 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);

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