[Web Extension Transformer] doesn't support executeScript, insertCSS, contentScript.register,runtime.getURL

[fregante]

🙋 feature request

There are 3 ways to inject files in a WebExtension:

• contentScripts.register()
• tabs.executeScript()
• tabs.insertCSS

So they should add a dependency to the graph because they work similarly to an import when they use the file property and generate those files in the dist folder.

🤔 Expected Behavior

browser.tabs.insertCSS(id, {file: '/ghost-text.css'}),
browser.tabs.executeScript(id, {file: '/ghost-text.js'})
browser.contentScripts.register({
  "js": [{file: '/ghost-text.js'}],
  "css": [{file: '/ghost-text.css'}]
});

should start traversing the /ghost-text.js and /ghost-text.css files.

😯 Current Behavior

They aren't handled

💻 Examples

More examples can be found on the linked pages and in https://github.com/GhostText/GhostText/blob/f2e1dcd869a2c3bba8aae2b15612a347a6e5be98/browser/scripts/background.js#L38-L44

Slightly unrelated, but Manifest v3 is coming with some additional manifest.json keys to consider:

• action.default_popup
• action.default_icon
• web_accessible_resources.resources

And Firefox supports some custom ones too:

• user_scripts.*
• theme.images

[101arrowz]

If we're doing this, might as well support runtime.getURL. Though it's usually not used outside of content scripts, and if it's used in content scripts, you'll need to add it to web_accessible_resources anyway.

[avalanche1]

might as well support runtime.getURL

Ambiguos.

Say, I've 4 files in assets folder which I ref with runtime.getURL. To not inflate manifest.json I write:
"web_accessible_resources": ["assets/*"],
Whereas if it's done automatically - it would list 4 distinct entries in the array. Which is a kind of unnecessary bloat.
While this is handy - the dev must be aware that there is such an entry in manifest.json and that it is explicit.

[101arrowz]

@avalanche1 After building with Parcel the two are identical. Globs are automatically expanded by the transformer for web extensions.

[101arrowz]

Just to clarify this issue, today you can do the following:

import yourCSSFile from 'url:./to-inject.css';

browser.tabs.insertCSS(id, {file: yourCSSFile});
// Similar for other import types

Also, chrome.runtime.getURL generally functions the same as a URL import. Nonetheless it would be nice to support this syntax directly, like navigator.serviceWorker.register.

[fregante]

That's pretty good. Can it be mentioned in the docs? I'm sure I'll forget about it in 3 hours 😅

[devongovett]

Also new URL should work, and it's a more standard way of declaring URL dependencies that even works natively. https://parceljs.org/languages/javascript/#url-dependencies

[cheap-glitch]

Also new URL should work

Actually I tried new URL to include an HTML file and it works, or at least it generates the same URL as runtime.getURL does, but then I get stuck on #8168.