Hi everyone,
I have been attempting to improve my add-on by making it cross-browser so that it’ll work on Google Chrome.
My add-on is a simple pop-up that modifies JS on the webpage that it is opened on via content scripts. Here my file structure to have an idea of the different scripts being used (I developed my add-on for Firefox, so it works as expected on this browser):
After looking for relevant documentation to make it cross-browser, I found the following two links:
I have tried implementing what is described on the documentation by installing browser-polyfill
via npm, and using it like by adding those lines in my manifest.json
:
"background": {
"scripts": [
"node_modules/webextension-polyfill/dist/browser-polyfill.js"
]
}
I also tried using this line at the top of my popup_listener.js
file but it was not successful:
browser.tabs.executeScript({file: "browser-polyfill.js"});
Currently, the extension loads with no errors on Chrome, and when opening the add-on on the toolbar the UI loads correctly as well. However the following error occurs when using the functionality of the add-on:
Uncaught ReferenceError: browser is not defined
Here is the full stack trace on Chrome:
I am sure I am missing something from the documentation but I cannot find anything that is helpful. Any help from anyone who managed to make a cross-browser add-on would be appreciated.
Thanks for your help