Chrome Extension .addEventListener never fired

Question

I'm trying to build a chrome extension for the first time. I have a simple button, that launches a youtube webpage. But I can't seem to figure out why the button's event listener is never fired.

The index.html:

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <button id="youtube-button">YouTube</button>

    <script>
        document.getElementById("youtube-button").addEventListener("click", function() {
            console.log('clicked youtoob button!')
            window.open("https://www.youtube.com/");
        });
    </script>
</body>
</html>

The manifest:

{
    "manifest_version": 2,
    "name": "YouTube Button",
    "description": "A button that opens YouTube",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "index.html"
    },
    "permissions": [
        "activeTab"
    ]
}

The console.log('clicked youtoob button!') is never fired inside the developer console when I click the button.

What am I doing incorrectly?

There's no good reason for it. I'm not a webdeveloper and this is the first time I ever made a front end webapp. — DIRTY DAVE, Feb 11 '23 at 11:45

AlanOnym · Accepted Answer · 2023-02-11T11:50:52.713

2

The chrome console indicates that you are facing a problem similar to this Script causes “Refused to execute inline script: Either the 'unsafe-inline' keyword, a hash… or a nonce is required to enable inline execution”. To see your error precisely, you can right click and do 'inspect' on your button.

As indicated, the cleanest way to do this is do create a new file in your directory, called openYoutube.js for example that contains this:

document.getElementById("youtube-button").addEventListener("click", function() {
  console.log('clicked youtoob button!')
  window.open("https://www.youtube.com/");
});

and then call it in your html file like this

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

edited Feb 11 '23 at 11:50

answered Feb 11 '23 at 11:48

AlanOnym

131
4

I created a file in the same directory named ```openYoutube.js```. I added it into the body tag. Still getting the same error. https://i.imgur.com/3x41Y0q.png – DIRTY DAVE Feb 11 '23 at 11:53
Edit: After clearing the error, and reloading the chrome extension it works. Thanks for the help. – DIRTY DAVE Feb 11 '23 at 12:01

score 1 · Answer 2 · answered Feb 11 '23 at 11:52

DevTools should have printed the following error:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-HikUgQ3MQB9uiD//iKT5jDhdLF+X0toeRrwaYXjWvhY='), or a nonce ('nonce-...') is required to enable inline execution.

It is caused by embedding script in html.

index.html

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <button id="youtube-button">YouTube</button>
    <script src="index.js"></script>
</body>
</html>

index.js

document.getElementById("youtube-button").addEventListener("click", function() {
  console.log('clicked youtoob button!')
  window.open("https://www.youtube.com/");
});

Still getting the same error. https://i.imgur.com/3x41Y0q.png — DIRTY DAVE, Feb 11 '23 at 11:56
Edit: After clearing the error, and reloading the chrome extension it works. Thanks for the help. — DIRTY DAVE, Feb 11 '23 at 12:01

Chrome Extension .addEventListener never fired

2 Answers2