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

Question

我正在尝试使用 Chrome 扩展程序向第三方网站上的页面动态添加一个按钮，并为该按钮添加一个点击处理程序。我已经阅读了Chrome 扩展程序中的onClick 不起作用，在单独的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);