由内容脚本在 Gmail、Facebook、stackoverflow 等创建问题的页面上创建的元素答案

【问题标题】：Element created by Content script on page creating issue with Gmail,Facebook,stackoverflow etc由内容脚本在 Gmail、Facebook、stackoverflow 等创建问题的页面上创建的元素
【发布时间】：2014-12-23 14:09:00
【问题描述】：

我正在开发一个 Chrome 扩展程序，我的要求是为每个打开的选项卡在页面上创建元素（按钮），并希望在单击按钮时显示简单的警报消息。它适用于所有人，但它总是会在 Gmail 中产生问题， Facebook 和 Stackoverflow..请帮我解决这个问题。

我的内容脚本中有向网页添加按钮的代码。

manifest.json
      ....
      ....
      "content_scripts": [
       {
         "matches":["http://*/*", "https://*/*"],
         "css": [ "style.css" ],
         "js":["contentScript.js"],
         "all_frames": false,
         "run_at": "document_idle"
       }
      ]
      ....
      ....

contentScript.js

....
....
    function addButton() {
document.body.innerHTML += '<button id="my_button" class="buttonCss">Show Button</button>';
var button = document.getElementById("my_button");
button.addEventListener("click", function () {
    alert("hello");
}, false);

} ...... ...... ....

我认为某些 Gmail 安全功能会造成问题。

【问题讨论】：

能否附上一些关于您遇到的问题的代码？
@gui47：我已经编辑了这个问题。请看一看。

标签： javascript google-chrome google-chrome-extension gmail

【解决方案1】：

document.body.innerHTML += /* ... */

我认为这是你的问题。它会强制 Chrome 重新创建 body 的整个 DOM，从而丢失附加的事件/数据。

正确的方法是构造和附加一个 DOM 节点：

var button = document.createElement("button");
button.id = "my_button";
button.className = "buttonCss";
button.textContent = "Show Button";
document.body.appendChild(button);

【讨论】：