javascript - Chrome 扩展程序 : How to add a button to a page on a web site and add a click handler to it?

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);