javascript - 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 附着在 body 上，但同时它也被移除了。只有在 html 检查器(在这种情况下是 chrome 的检查器)的帮助下才能看到它。

div(adDiv) 附加到标记中的正文并消失。 就好像无法将自己束缚在 body 上。结果:页面中没有任何内容。

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

---

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

此外，您还应该考虑为您的广告转换其他位置，例如只显示一个通过 list 绑定(bind)到浏览器操作的弹出窗口，不要通过 browserAction 的事件监听器更改外部页面。