Execute javascript in Firefox extension popup

I am currently taking my very first steps in extension development. At the moment I'm just trying to display some info in a popup that appears when I hit the button. The problem is that it is dynamic information, that I gather from a JSON-file on the internet. I could not get the data to show up in the pop-up however, and I've narrowed the problem down to the point that it just does not seem to run any Javascript at all...

I have a extremely simple code left:

manifest.json:

    {

  "manifest_version": 2,
  "name": "Test Extention",
  "version": "1.0",

  "description": "",

  "icons": {
    "256": "icon/button.png"
  },
  "permissions": [
    "activeTab",
    "storage"
  ],
  "browser_action": {
    "default_icon": {
      "200": "icon/button.png"
    },
    "default_title": "Test Extention",
    "default_popup": "popup/popup.html"
  }
}

popup/popup.html:

<html>
    <head>
        <meta charset="utf-8">
        <style>
        html,body{width:300px}
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script>
        document.getElementById('container').innerHTML = 'testing';
        </script>
    </body>
</html>

When I run the html-file directly in firefox, it displays "testing" as expected. When I run the extension however, I get a empty pop-up when clicking the new button.

I have also tried putting the js-code in a function, and calling that with a button, to see if it needed some time before js-code can be run, but that does not work either.

I am sure it is something extremely simple I'm missing, but I cannot find anything on this...

I have a extremely simple code left:

manifest.json:

    {

  "manifest_version": 2,
  "name": "Test Extention",
  "version": "1.0",

  "description": "",

  "icons": {
    "256": "icon/button.png"
  },
  "permissions": [
    "activeTab",
    "storage"
  ],
  "browser_action": {
    "default_icon": {
      "200": "icon/button.png"
    },
    "default_title": "Test Extention",
    "default_popup": "popup/popup.html"
  }
}

popup/popup.html:

<html>
    <head>
        <meta charset="utf-8">
        <style>
        html,body{width:300px}
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script>
        document.getElementById('container').innerHTML = 'testing';
        </script>
    </body>
</html>

When I run the html-file directly in firefox, it displays "testing" as expected. When I run the extension however, I get a empty pop-up when clicking the new button.

I have also tried putting the js-code in a function, and calling that with a button, to see if it needed some time before js-code can be run, but that does not work either.

I am sure it is something extremely simple I'm missing, but I cannot find anything on this...

Share Improve this question asked Jan 6, 2018 at 18:28 Discoverer 711 silver badge6 bronze badges

2 check the console of the addon debugger (about:debugging) or the browser console (ctrl+shift+j). – the8472 Commented Jan 6, 2018 at 18:45
@the8472 Thanks for the tip, I did not know the console in about:debugging. When I open the pop-up it creates a error: Content Security Policy: De instellingen van de pagina blokkeerden het laden van een bron op self (‘script-src moz-extension://b777829c-c282-42fd-829c-10b9c5e9332e’). Source: document.getElementById('container')..... It is in Dutch, but translates roughly to: Content Security Policy: the page settings blocked the loadingof a source on self – Discoverer Commented Jan 6, 2018 at 18:56
After searching on this error-message, I discovered that it is not possible to use js-code in the html-file itself. I have moved the code to its own js-file, and included it with <script src="..."></script>. This time, the text "testing" did appear. I'm going to try the next step, and get the data to be fetchd from an online json. – Discoverer Commented Jan 6, 2018 at 19:24

Add a ment |

1 Answer 1

Sorted by: Reset to default 10

WebExtension APIs have a Content Security Policy applied to them by default. So it can't execute inline javascript code in popup HTML files.

Not only:

<script>
    document.getElementById('container').innerHTML = 'testing';
</script>

But also:

<button onclick="alert('hello')">Hello</button>

If you touched this rule, you can get some error message in Browser Toolbox and Add-on Debugger.

So, for fix this, use <script src="..."></script> rather than <script>...</script>.

Or, maybe set Unsafe inline script to content_security_policy key in manifest.json can fix this too. But MDN tells me:

Note: Valid examples display the correct use of keys in CSP. However, extensions with 'unsafe-eval', 'unsafe-inline', remote script, blob, or remote sources in their CSP are not allowed for extensions listed on addons.mozilla due to major security issues.

in this page. It seems that not good way.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Execute javascript in Firefox extension popup - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)