Button doesn't work in firefox extensions?
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.)
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 👍 1All Replies (4)
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().
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.
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.)
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/
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 :)