Chrome 擴展程序：如何向網站上的頁面添加按鈕並為其添加點擊處理程序？

Question

我正在嘗試使用 Chrome 擴展程序向第三方網站上的頁面動態添加一個按鈕，並為該按鈕添加一個點擊處理程序。 我已經閱讀了Chrome 擴展程序中的onClick 不起作用，在單獨的js文件中添加了處理程序。

問題是 Chrome 嘗試在 Web 服務器中而不是在擴展程序中找到該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);