Javascript does not work on my Chrome extension

Asked

Viewed 36 times

1

I’m trying to create a simple trial extension for the Chrome browser, where I create a button that when clicked, shows a message inside a <div>.

My file manifest.json currently is like this:

{
    "name": "Hello World Viewer",
    "version": "0.2.3",
    "description": "A test application",
    "browser_action": {
        "default_popup": "index.html"
    },
    "manifest_version": 2
}

Below is my HTML code along with JS:

<!DOCTYPE html>
<html>
    <head>
        <title>My first extension</title>
        <script>
            console.log("JavaScript Running!");
            document.addEventListener("DOMContentLoaded", () => {
                document.querySelector("#btn").addEventListener("click", () => {
                    document.querySelector("#msg").innerText = "Hello World :)";
                });
            });
        </script>
    </head>
    <body>
        <div id="msg">**********************</div>
        <button id="btn">Click here</button>
    </body>
</html>

Whenever I try to click the button through the extension (the code works like page normally) nothing happens. Apparently the JS does not run.

I put in the code this console.log() to check if the JS runs, but the message is not printed. What is happening?

javascript google-chrome-extension
No answers

Browser other questions tagged javascript google-chrome-extension

You are not signed in. Login or sign up in order to post.