Question

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

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

当我检查这些页面的dom结构时，这些小部件在iframe中创建自己的html＆gt; 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小部件而不是主要的。我正在做什么有什么不对吗？

修改

来自@ stan的评论我能够在带有facebook / twitter小部件的页面中解决问题（即使用iframe的小组）。现在我的代码看起来像这样：

document.body.appendChild(adDiv);

- 谢谢Stan。

但现在我面临另一个问题。在某些网站（例如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的事件监听器更改外部页面。

chrome扩展 - 将div添加到不与facebook一起工作的正文按钮

1 个答案: