JavaScript seem disabled in temporary extension's popups/setthings pages (developed by me)

Add-ons Development
#1

In about:config

javascript.enabled = True

I didn’t change any settings there.

Code https://github.com/conradOU/readOutLoudSubtitlesFirefoxExtension/tree/to-show-on-dev-forum-for-help-with-JS-not-running

If I place, for example

 "options_ui": {
   "page": "settings.html",
   "open_in_tab": true
 },"

in the manifest.json of the extension, it does open the settings.html page as intended. Problem is that no JS script on settings.html works, be it if it’s inline HTML or as a separate file (I tried separate file, as I thought it might be a security thing).

For the settings.js to work, I needed to add it to "content_scripts": [] in the manifest file. That made the console.log("from outside of showPopup") work upon opening of the settings.html file, but clicking on the button, doesn’t show the popup, nor prints console.log("from inside of showPopup")

If I don’t add settings.js to "content_scripts": [] no code in it execute at all.

Other actually installed extensions - their JS on settings pages runs.

I also tried running settings.html as a popup, and I succesfully done so, it’s just that once again JS didn’t work…

I’m at my wits end, I have googled, I have chatted with the ChatGPT, took me hours thinking it was something wrong with my code… I’m making something useful, never done before (it reads out youtube subtitles via TTS, providing ability to still hear original sound, its emotions, no need to look at the screen and it’s also a passive language learning type of thing), and it works with harcoded speed and voice level, it’s just that setting page’s JS, which I think I need to allow users change speed of TTS and volume of the TTS

#2

Browser extensions don’t allow any inline JavaScript. So I believe your onclick attribute may be causing the issue. Try converting that to an addEventListener in your JavaScript file.

1 Like
#3

*inline JavaScript
:slight_smile:,
specifically this one:

    <button onclick="showPopup()">Show Popup</button>
1 Like
#4

I asked on https://app.element.io/#/room/#addons:mozilla.org too, and got a similar answer.

For others, I share the responses from the chat (not yet tried, although I trust you that I’m set on a correct path)

The default CSP does not allow inline JS, so both <script> some code </script> and onclick -like handlers aren’t going to work. The “from outside of showPopup” log message should appear from your settings page without mentioning the file in content_scripts .

__

Your settings.html includes settings.js , so you should install them in settings.js .

  • Note that your settings.js should not be in content_scripts unless you want it to work inline in the target page instead of your settings.html .

Also note that addons definitely aren’t allowed to run any remote scripts, including Youtube API, in privileged contexts, so your content_security_policy won’t work (or, more likely, will trigger automatic rejection on AMO)

__

Because onclick="showPopup()" is inline JS that’s forbidden by CSP. You should instead <button id="my-button"> and document.getElementById("my-button").addEventListener("click", showPopup)

1 Like
#5

This is why I hate autocomplete on mobile :neutral_face: