0

This is my first attempt at making an extension, and I basically just followed and rewrote the code from my JS book.

Manifest.json

{

 "name": "My first extension",
 "version": "1.0",
 "description": "Hello World extension",
 "manifest_version": 2,
 "browser_action": { 
    "default_icon": "icon.png",
    "popup": "popup.html"
 }

}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extension Test</title>

    <style>
        body { 
            width:350px;
        }

        div { 
            border: 1px solid;
            padding:20px;
            font: 20px normal helvetica, verdana, sans-serif;
        }
    </style>

    <script>
        function sayhello() { 
            var message = document.createTextNode("Hello World");
            var out = document.createElement("div");
            out.appendChild(message);
            document.body.appendChild(out)
        }
        window.onload = sayhello;
    </script>

</head>




<body>




    
</body>
</html>

I've enabled the extension, and the icon appears, but when I click it, nothing happens. The inspect popup button is also grayed out, and cannot be clicked.

What am I doing wrong?

Note: I'm also not really sure what the code is supposed to do. Again, I'm just doing what the book says. I tried to insert an alert() inside the function, but nothing changed. The extension still doesn't work.

happy_story
  • 1
  • 1
  • 7
  • 17
  • I don't know if it makes a difference, but the JavaScript is usually put in a separate content script, not in the HTML. – Barmar Apr 05 '21 at 15:07
  • I separated the JS, and put the new JS file into the same folder, and again, nothing happens when I click the extension icon. What am I doing wrong? – happy_story Apr 05 '21 at 16:00

1 Answers1

2

It seems that the fault lies within your Manifest.json.

According to the documentation on the Chrome website, you should define the page to open within the default_popup property, not the popup property.

More information can be found here.

It would seem that your book is a little bit outdated, or just faulty.

Simply put, change this;

{

 "name": "My first extension",
 "version": "1.0",
 "description": "Hello World extension",
 "manifest_version": 2,
 "browser_action": { 
    "default_icon": "icon.png",
    "popup": "popup.html"
 }

}

To this;

{

 "name": "My first extension",
 "version": "1.0",
 "description": "Hello World extension",
 "manifest_version": 2,
 "browser_action": { 
    "default_icon": "icon.png",
    "default_popup": "popup.html"
 }

}

And the popup should show without problems.

An additional note; the JavaScript shown in the question should be separated into a separate file as it will generate an error.

Alain Doe
  • 532
  • 3
  • 7
  • You're right. It semi-worked now. I did try the `default_popup` before too, but I didn't separate the JS file while trying it. So, now what happens is that a little popup appears, but it's empty. Shouldn't there be a text saying "hello world" inside? I tried only having an alert inside the function, but nothing happens. Why isn't the alert going on, or the text appearing? – happy_story Apr 05 '21 at 20:18
  • 1
    Never mind. I forgot to link the JS page to the HTML :) It's all good now. Thanks a lot. – happy_story Apr 05 '21 at 20:24
  • Hey. Can I ask you one more thing? I've tried a different extension, but now the problem is that the Jquery script is not loaded, because it violates some content security policy. It says `Refused to load the script 'https://code.jquery.com/jquery-3.6.0.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.` I've added this `` in.. – happy_story Apr 06 '21 at 12:23
  • .. in the head, but it still doesn't work. I edited the `manifest` file to add this `"content_security_policy": "script-src 'self' 'unsafe-eval' https://maps.googleapis.com 'unsafe-inline'; object-src 'self'",` but it still doesn't work. It keep saying that jquery script is blocked. How do I unblock it? – happy_story Apr 06 '21 at 12:24
  • **Edit:** [See this page](https://stackoverflow.com/questions/34950009/chrome-extension-refused-to-load-the-script-because-it-violates-the-following-c) for more accurate information. Chrome is blocking you from including scripts from outside sources as this can be a security risk. You can either download the JQuery file and include it locally within the Extension's file structure ( so instead of ``, download the .js file and do `` ) or declare it in your manifest.json. – Alain Doe Apr 06 '21 at 13:43
  • If you're going to include outside libraries, I would suggest download them as you never know how the online library might change in the future and potentially break your extension's functionality. – Alain Doe Apr 06 '21 at 13:50
  • Thanks. Can you tell me how do I download the js file? Do I just copy the text into a new js file called `jquery-3.6.0.js`? How do I declare it in `manifest.json`? I'm also not sure how do I download the jquery liberaries. I've always just used the link. By the way, if I have to download the jquery or the libraries, doesn't that mean that, if I create an extension with them, that extension won't be usable for other users? Do people who create extensions not use libraries or jqery? – happy_story Apr 06 '21 at 14:31
  • Just navigate to the link and hit `Ctrl`+`s` to save the page, or just copy all the code you see and paste it in a new `.js` file. See the linked page in my previous comment on how to alternatively add the permission to the manifest.json. The idea behind you downloading the JQuery library is that you package it in your extension, same as you package your `popup.html` and `popup.js`, etc. – Alain Doe Apr 06 '21 at 14:37
  • So, I removed the jqery link from my HTML page, and downloaded the page, and put it in the same folder. Now, the previous error is not showing, but a new one is showing, saying simply that `$ is not defined` meaning that, jqery is not linked. I tried doing what the best answer of your link says, which is to put `"content_security_policy": "script-src 'self' https://example.com; object-src 'self'",` this in the `manifest` file, only replacing `example.com` with the jqery link, but nothing changed. Am I doing something wrong? – happy_story Apr 06 '21 at 15:30
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/230813/discussion-between-alain-doe-and-definitelynotme). – Alain Doe Apr 06 '21 at 15:45