I'm very new to writing browser extensions, and at the moment I'm creating a little script that enhances Oracle BI for my company. It basically just changes a bit of things in the DOM, like adding an icon to a tab, depending on which url it is on (at least for now), and it works well. Here is a manifest.json for now:
manifset.json
{
"manifest_version": 2,
"name": "BI+",
"version": "1.0",
"description": "Zestaw dodatków wzbogacających funkcjonalność Oracle BI.",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*/analytics/saw.dll?IBotSummary*"],
"js": ["scripts/agent_edit.js"]
},
{
"matches": ["*://*/analytics/saw.dll?EditDashboard*"],
"js": ["scripts/dashboard_edit.js"]
}
]
}
So for every different type of page I will have a separate script, and as you can imagine that means reusing a lot of code. So I've created a separate module, utilities.js, to pack all the functions I'm reusing often:
/icons
/scripts
++ utilities.js
++ agent_edit.js
++ dashboard_edit.js"
manifest.json
For now it is just a simple hello_world, and I can't event get that to work:
export function hello_world (){
console.log('HELLO WORLD');
}
and my scripts/agent_edit.js is basically that (very simplified):
import { hello_world } from "./utilities.js";
function _some_async_awaiting_for_element() {
main()
}
function main () {
hello_world()
add_icon_to_tab() # I want to move this to utilities.js once I get it to work
}
And as soon as I do that import in this content script, not even the hello_world() function call, this content script just does not fire up on the correct website. I checked every possible way of importing on mozilla docs: Mozilla Docs.
I thing it might have something to do with this line in the docs, but I'm not sure how to implement it when basically my extension does not include a DOM:
The import statement cannot be used in embedded scripts unless such script has a type="module".
How would one go about importing modules in this type of extension?