Question

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

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

让我们说网页是＆＃34; http://www.somecompany.com/somepage.html＆＃34;。我的扩展程序代码如下所示。

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

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

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

加

我在＆＃34; aButtonHandler.js＆＃34;中添加了代码。到内容脚本本身的末尾，但什么也没发生。有什么问题？

content script.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');
    });
});

加

这很有用。

content script.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);

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

1 个答案: