2

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

但问题是，如果该页面包含 facebook like 或 twitter follow 小部件，则此 div 不会附加到主页的主体标签。相反，它会附加到上述小部件的 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) 在标记中附加到正文并消失。仿佛无法将自己束缚在身体上。结果：页面中没有出现任何内容。

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

背景.js

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

内容.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);
    }
}
4

1 回答 1

0

对于问题的第一部分，您可能应该尝试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 的事件侦听器更改外部页面。

于 2012-11-04T12:37:34.207 回答