由页面上的内容脚本创建的元素创建Gmail,Facebook,stackoverflow等问题

Question

我正在开发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安全功能正在产生这个问题.

Answer 1

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

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

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

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