I have a Chrome extension, that has different scripts for several pages:
{
"name": "My extension",
"version": "1.0.0",
"manifest_version": 3,
"content_scripts": [{
"matches": ["https://first/page"],
"run_at": "document_idle",
"js": ["first.js"]
}, {
"matches": ["https://second/page"],
"run_at": "document_idle",
"js": ["second.js"]
}]
}
I want to use some helper functions in both scripts. How do I load a second file, e.g. lib.js so that functions defined in there are available?
I've tried using chrome.runtime.getURL which gets me a URL to the file, but doesn't allow me to "load" it. I also tried just adding the file to the js property, which makes the file load but when trying to call the functions they are undefined. And I've tried several types of import statement, but haven't gotten them to work either.
So, how can I do this without duplicating the common code into both content script files?