2

我正在构建一个 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”

4

3 回答 3

1

还使用 addEventListener 将事件绑定到按钮：

检查下面的代码：

document.addEventListener('DOMContentLoaded', function () {
    var btn = document.getElementById('checkButton');
    btn.addEventListener('click', function() {
        alert("button clicked");
    });
});
于 2019-10-23T03:44:17.440 回答
1

您popup.js应该添加到popup.html而不是添加到后台脚本中。像这样：

    "background": {
      "scripts": [
        "background.js"
      ],
      "persistent": false
    },

然后你popup.js应该放在popup.html：

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

<script src="popup.js"></script>
于 2019-10-23T07:26:20.707 回答
0

I figured some things out!

I changed the input type to button to prevent the default action. (Submitting a form) -

 <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="button" value="Submit">
    </form>

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

And put binded the event to the button.

document.addEventListener('DOMContentLoaded', function () {

    var btn = document.getElementById('checkButton');

    btn.addEventListener('click', function() {

    //Get URL from input
    var URL = document.getElementById('URL').value;

    //Get all links
    var links = document.querySelectorAll('.article a');

    //Convert Nodelist to Array
    var linksArr = [];
    links.forEach(node => linksArr.push(node.href))

    //Compare Link to Array
    var compareArr = linksArr.includes(URL);

    //Alert if link exists on page, or not
        if (compareArr === true) {
            document.getElementById('message').innerHTML = " On the page - Don't Add Link";
        }
        else {
            document.getElementById('message').innerHTML = ' Not on the page - Add Link';
        }
   });
});
于 2019-10-24T23:32:33.117 回答