Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Button doesn't work in firefox extensions?

  • 4 replies
  • 2 have this problem
  • 2 views
  • Last reply by Alessandro

more options

Hi everyone, I have created an extension that can be used from the usual position at the top right through which you can do some things, including open a website locally. To be clearer ...

Extension Folder: - extension.js - manifest.json - LocalWebSite (folder)

Inside the LocalWebSite folder: - index.html

Then clicking the button via the extension will load the local website. At this point, when the local website is opened it becomes impossible to trigger any button, modal, or whatever, it's a totally static page.

One important thing is that I don't want to replace the popup with the static page, I wish I could have both.

Extension Code: // SiteWebLocale function openWebSite () {

   browser.tabs.create ({
       "url": "./LocalWebSite/index.html"
   });

} document.getElementById ("openWebSite"). addEventListener ("click", openWebSite);

Local Website Button Code (It doesn't work): <button type = "button" class = "btn btn-danger" onclick = "alert ('ok')"> Action </button>

Hi everyone, I have created an extension that can be used from the usual position at the top right through which you can do some things, including open a website locally. To be clearer ... Extension Folder: - extension.js - manifest.json - LocalWebSite (folder) Inside the LocalWebSite folder: - index.html Then clicking the button via the extension will load the local website. At this point, when the local website is opened it becomes impossible to trigger any button, modal, or whatever, it's a totally static page. One important thing is that I don't want to replace the popup with the static page, I wish I could have both. Extension Code: // SiteWebLocale function openWebSite () { browser.tabs.create ({ "url": "./LocalWebSite/index.html" }); } document.getElementById ("openWebSite"). addEventListener ("click", openWebSite); Local Website Button Code ('''It doesn't work'''): <button type = "button" class = "btn btn-danger" onclick = "alert ('ok')"> Action </button>

Chosen solution

Alessandro said

I had already thought of using addEventListener () also in the second part but I don't think it will be useful since I would have to load data when opening the page and create a table of variable size where each row contains a button to perform a particular operation. Not being able to know in advance how many rows I have in the table, can't I create enough eventListener (), or can I and I don't know how to do it?

I suggest creating a single event listener at the level of a container that will encompass all of your buttons -- taking advantage of the fact that events naturally bubble up from the specific button through each containing element (td, tr, tbody, table, etc.) to the document. (MDN) Then you can check an attribute of the target to determine what action needs to be taken. I can give you an example from one of my Options pages. There's an event listener on the form, and then a single function handles the event. In this example, the function checks the target element's type and name because they are form controls, but for buttons, you could check a unique ID. (The main thing is to ignore events that arise from clicking on text or blank space.)

https://github.com/jscher2000/View-Image-Info-Reborn-for-Firefox/blob/main/view-image-info-options.js#L181

It may make more sense if you install the extension and play with the Options page a bit.

https://addons.mozilla.org/firefox/addon/view-image-info-reborn/

Read this answer in context 👍 1

All Replies (4)

more options

Where is that page --

Alessandro said

function openWebSite () {
    browser.tabs.create ({
        "url": "./LocalWebSite/index.html"
    });
}

Is that a page provided as part of your extension? Generally speaking, inline script (onclick handler) is discouraged and may be blocked by the default CSP for extension pages. Try attaching your event handlers using addEventListener().

more options

jscher2000 said

Where is that page --

Alessandro said

function openWebSite () {
    browser.tabs.create ({
        "url": "./LocalWebSite/index.html"
    });
}

openWebSite () is a function of the extension.js file

Is that a page provided as part of your extension?

Yes, is on a folder of my extension

Generally speaking, inline script (onclick handler) is discouraged and may be blocked by the default CSP for extension pages.

I know that inline script is not recommended but it was the simplest thing that came to my mind to be able to practically explain my mistake.

Try attaching your event handlers using addEventListener().

I had already thought of using addEventListener () also in the second part but I don't think it will be useful since I would have to load data when opening the page and create a table of variable size where each row contains a button to perform a particular operation.

Not being able to know in advance how many rows I have in the table, can't I create enough eventListener (), or can I and I don't know how to do it?

Thanks for your help.

more options

Chosen Solution

Alessandro said

I had already thought of using addEventListener () also in the second part but I don't think it will be useful since I would have to load data when opening the page and create a table of variable size where each row contains a button to perform a particular operation. Not being able to know in advance how many rows I have in the table, can't I create enough eventListener (), or can I and I don't know how to do it?

I suggest creating a single event listener at the level of a container that will encompass all of your buttons -- taking advantage of the fact that events naturally bubble up from the specific button through each containing element (td, tr, tbody, table, etc.) to the document. (MDN) Then you can check an attribute of the target to determine what action needs to be taken. I can give you an example from one of my Options pages. There's an event listener on the form, and then a single function handles the event. In this example, the function checks the target element's type and name because they are form controls, but for buttons, you could check a unique ID. (The main thing is to ignore events that arise from clicking on text or blank space.)

https://github.com/jscher2000/View-Image-Info-Reborn-for-Firefox/blob/main/view-image-info-options.js#L181

It may make more sense if you install the extension and play with the Options page a bit.

https://addons.mozilla.org/firefox/addon/view-image-info-reborn/

more options

jscher2000 thanks! it is a really simple and amazing alternative to solve the problem. i didn't think about it, so thanks. I marked your response like solution :)