Add JS Event Listener to Chrome Extension Popup

user_11975348 0
Viewed 5876

I'm building a Chrome Extension, and I'm having some trouble adding an event listener. I want to add it to a button within the popup.

Here's the JS -

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

And here's the popup 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>

Also, here's the manifest.json just in case - 

{
    "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"
      ]
}

When I unpack the extension, I get this error. - Error in event handler: TypeError: Cannot set property 'onclick' of null

Then it keeps repeating this error over and over again. - Uncaught TypeError: Cannot read property 'addListener' of undefined

event-listener google-chrome-extension javascript
3 Answers

use addEventListener to bind the event to button also:

Check the code below:

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

Your popup.js should be added into popup.html instead of add to background scripts. Like so:

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

and then your popup.js should be placed in popup.html:

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

<script src="popup.js"></script>
user_51084040

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';
        }
   });
});
user_119753480
Related