Question

我正在尝试创建chrome扩展，但无法以正确的方式将监听器附加到按钮。必须注意的是，我对js不太熟悉，所以问题在于一些误解概念或一些元素加载时间。

"background" : {"page" : "kbm.html"}

我正在使用清单v2，因此内联js被取消，所以我试图在回调中添加监听器

这是kbm.html：

<!DOCTYPE html>
<html>
    <head>
        <script src="kbm.js"></script>
    </head>
    <body>
        <button id="loadall">Open all saved</button>
    </body>
</html>

这是kbm.js：

chrome.browserAction.onClicked.addListener(
        function(tab) {
            chrome.tabs.create( {'url': chrome.extension.getURL('kbm.html')}, 
                function(tab) {
                    alert(document.getElementById("loadall"));
                       document.getElementById("loadall").addEventListener("click",loadAll,false);
                });
        }
);

function loadAll(){
    alert("hallo");
}

加载kbm.html并单击工具栏图标后，我可以看到来自chrome.tabs.create回调的警报消息。但点击loadall按钮什么也没有。

我可以在调试器中看到（使用f12）页面加载后按钮上没有监听器。

语法似乎没问题，因为我可以从js-console

动态添加监听器到按钮

>document.getElementById("loadall").addEventListener("click",loadAll);
undefined

它出现在元素描述中，所以我在点击后看到来自loadAll（）调用的警告。

首先，我认为mb回调是在所有页面元素初始化之前调用的，因此它找不到id =“loadall”的元素，但是根据第一个警告并带有消息

object HTMLButtonElement

这不是原因。

但是我仍然不明白为什么在页面加载时没有附加回按钮的回调:(

我看了一些例子，但我不能盲目地复制实现我想找到我错过的东西。

提前致谢。

Answer 1

呃......我只是放弃并将按钮监听器逻辑添加到另一个地方：

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('loadall').addEventListener('click', loadAll)
}

无法在Chrome扩展程序中添加监听器

1 个答案: