javascript - 将 JS 事件监听器添加到 Chrome 扩展弹出窗口

标签 javascript google-chrome-extension event-listener

我正在构建 Chrome 扩展程序,但在添加事件监听器时遇到一些问题。我想将其添加到弹出窗口中的按钮。

这是 JS -

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('checkButton').onclick = grabLinks;
});

这是弹出的 HTML -

<!DOCTYPE html>
    <html>
    <head>

<script src="background.js"></script>

    </head>
<body>

    <h3>Duplink</h3>

    <p>Check if a link is already on this page.</p>
    <form>
            URL: <input id="URL" type="text" name="URL"><br>
            <input id='checkButton' type="submit" value="Submit">
    </form>

    <p>Link is:<span id="message"></span></p>

</body>
</html>

另外,这里是manifest.json,以防万一 -

{
    "name": "Duplink",
    "version": "1.0",
    "description": "Check for duplicate links on DotDash sites",
    "manifest_version": 2,
    "background": {
      "scripts": [
        "background.js",
        "popup.js"],
      "persistent": false
    },
    "browser_action": {
        "default_popup": "popup.html",
        "default_title": "Duplink"
      },
      "permissions": [
        "activeTab",
        "storage"
      ]
}

当我解压扩展程序时,出现此错误。 - 事件处理程序中出现错误:TypeError:无法将属性“onclick”设置为 null

然后它就会一遍又一遍地重复这个错误。 - 未捕获类型错误:无法读取未定义的属性“addListener”

最佳答案

使用 addEventListener 将事件绑定(bind)到按钮:

检查下面的代码:

document.addEventListener('DOMContentLoaded', function () {
    var btn = document.getElementById('checkButton');
    btn.addEventListener('click', function() {
        alert("button clicked");
    });
});

关于javascript - 将 JS 事件监听器添加到 Chrome 扩展弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58514456/

相关文章:

java - 如何在 Azure 队列存储中绑定(bind)事件监听器

javascript - 单击打开按钮(事件监听器)后,React popover(modal)自动关闭

javascript - Web Animations API 中的步骤

node.js - 我的 Chrome 扩展程序和服务器之间的身份验证策略

google-chrome-extension - 如何打开 chrome ://extensions/

javascript - Chrome 扩展程序 : can detect drag&drop in address bar?

javascript - 使用 Jquery 返回许多要在 html 中更新的值

javascript - emacs - 从 js-mode-hook 中排除 json-mode

javascript - 如何使用两个参数过滤数组?

objective-c - 如果按下某个修改器但没有其他修改器,则检查 NSEvent 的 modifierFlags