无法在 chrome 扩展中添加监听器答案

【问题标题】：cant' add listener in chrome extension无法在 chrome 扩展中添加监听器
【发布时间】：2013-07-10 07:01:22
【问题描述】：

我正在尝试创建 chromium 扩展，但无法以正确的方式将侦听器附加到按钮。需要注意的是，我对js不是很熟悉，所以问题出在一些误解或一些元素加载时间上。

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

我正在使用 manifest 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

不是这个原因。

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

我查看了示例，但我不能盲目地复制它们，我意识到我想找到我缺少的东西。

提前致谢。

【问题讨论】：

标签： javascript google-chrome google-chrome-extension listener

【解决方案1】：

嗯...我刚刚放弃并将添加按钮侦听器逻辑移到另一个地方：

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

【讨论】：