Scripts don't seem to run from extension

I’ve got a popup extension that generates a password Im using to learn a bit more html/css/js and how those interact with firefox from an extension standpoint. Using VSCode, Im able to run the application on the Live Server extension and get the script working alongside the html/css aspect, but whenever I try and run it as an extension through about:debugging, it doesn’t run the script. The html/css appear fine, but the buttons do nothing, and no generated password is put into the output box.

Here is a link to the github repo with the code, if it helps.

So few things I’ve noticed:

  1. in your page action script you don’t wait for DOM to be ready, so I’m pretty sure “document” is undefined when the script runs:
    https://github.com/HStep20/polly-password/blob/master/pageAction/script.js
  2. in your manifest you are using same script file as background script and content script - that doesn’t sound right at all:
    https://github.com/HStep20/polly-password/blob/master/manifest.json
    Make sure you understand anatomy of extensions:
    https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
1 Like

I definitely need to work a bit more with the background vs content scripts to understand them more.

I’ve gone back to debugging, and the problem seems to be that the script refuses to run due to the Content Security Policy.

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

I’ve done some web searching, and according to Firefox CSP Docs, it should automatically be applied, if otherwise not specified.

I’ve also looked through the mozilla github extension examples, and I believe that I may not need the content/background scripts. I believe that the script Im running is only relative to the html/css, and doesn’t need to run unless the extension is open.
Though, I could be misunderstanding the structure of extensions again.

Regarding CSP problems - you can’t use onclick="generate()" in the HTML, you have to setup all handlers through javascript. Either generate all DOM in javascript or use ID to find elements that you want to use and find them using document.getElementById.

Looking through examples is a good idea :slight_smile:
Happy coding!

Good to know, Thanks! Updated it to getElementByIDs and it works perfectly now. Ill have to look into DOM generation with JS for the future.

1 Like