Chrome 扩展程序：如何向网站上的页面添加按钮并为其添加点击处理程序？

Question

我正在尝试向第三方网站上的页面动态添加按钮，并使用 Chrome 扩展程序向按钮添加点击处理程序。我已阅读 onClick within Chrome Extension not working，将处理程序添加到单独的 js 文件中。

问题是 Chrome 试图在网络服务器中找到 js 文件，而不是在扩展程序中。所以，404 发生了。

假设网页是“http://www.somecompany.com/somepage.html”。我的扩展代码如下。

    var aButton = document.createElement('button');
    aButton.id = "aButton";
    thatDiv.appendChild(aButton);

    var aScript = document.createElement("script");
    aScript.src="aButtonHandler.js";
    thatDiv.appendChild(aScript);   

Chrome 尝试加载“http://www.somecompany.com/aButtonHandler.js”，当然真实网站没有该脚本，所以会发生 404。如何向网站添加按钮并在单击按钮时执行alert("hello");？

---

添加

我将aButtonHandler.js 中的代码添加到内容脚本本身的末尾，但没有任何反应。怎么了？

内容脚本.js

addButton();

function addButton()
{
    //adds a button by the code above.
}

document.addEventListener('DOMContentLoaded', function() {
    var theButton = document.getElementById('aButton');
    theButton.addEventListener('click', function() {
        alert('damn');
    });
});

---

添加

这行得通。

内容脚本.js

addButton();

function addButton()
{
    //adds a button by the code above.
    aButton.addEventListener('click', function() {
        alert('damn');
    });
}

Answer 1

使用setInterval函数检查<button>元素是否存在，如果不存在则创建并附加<button>元素。

var myVar = setInterval(function() { 
    if(document.getElementById('aButton')) {
        //  clearInterval(myVar);
        return false;
    } else {
        if(document.getElementsByClassName("assignedToUsers")[0]) {
            var button = document.createElement("button");
            button.innerHTML = "Test";
            button.id = "aButton";
            button.type = "button";
            document.getElementsByClassName("assignedToUsers")[0].appendChild(button);

            var theButton = document.getElementById('aButton');
            theButton.addEventListener('click', function() {
                console.log(document.getElementsByClassName("ms-TextField-field")[0].value);
            });
        }
    }
}, 500);