rollup-plugin-web-extension
A rollup plugin to help build cross browser platform, ES module based web extensions.
Browser Support
In order to fully support ES module based extensions, the following requirements must be met by the browser:
- Must support dynamic module imports made by web extension content scripts.
- If using Manifest V3, must support ES modules in service workers.
Some minimum supported browsers:
Manifest V2 | Manifest V3 | |
---|---|---|
Chromium | 63 (Untested) | 91 |
Firefox | 89 | N/A |
Usage
- All manifest file paths (including paths in manifest HTML files) should be relative to the root of the project.
- If your rollup config supports it, you can define paths using a non-js file extension. (eg
.ts
for TypeScript).
- If your rollup config supports it, you can define paths using a non-js file extension. (eg
Config Examples
Manifest V2
import webExtension from "@samrum/rollup-plugin-web-extension";
import pkg from "./package.json";
export default {
output: {
dir: 'dist',
},
plugins: [
webExtension({
manifest: {
name: pkg.name,
description: pkg.description,
version: pkg.version,
manifest_version: 2,
background: {
scripts: ["src/background/script.js"],
},
},
}),
],
};
Manifest V3
import webExtension from "@samrum/rollup-plugin-web-extension";
import pkg from "./package.json";
export default {
output: {
dir: 'dist',
},
plugins: [
webExtension({
manifest: {
name: pkg.name,
description: pkg.description,
version: pkg.version,
manifest_version: 3,
background: {
service_worker: "src/background/serviceWorker.js",
},
},
}),
],
};
What the Plugin Does
The plugin will take the provided manifest, parse rollup input scripts from all supported manifest properties as well as within any background, option, popup, or web accessible html files, and then output an ES module based web extension.
This includes:
- Parsing and adding the
type="module"
attribute to input scripts within manifest background, options, popup, and web accessible HTML files. - If using background scripts, generating and using a background html file to load scripts as ES modules.
- If using background service workers, adding the
type: "module"
property to theservice_worker
manifest property - Generating and using a dynamic import wrapper script in place of original content scripts while moving the original scripts to
web_accessible_resources
so they are accessible by the wrapper script. This is necessary because content scripts are not able to be loaded as modules.- NOTE: This may expose your extension to fingerprinting by other extensions or websites. Manifest V3 will support a
use_dynamic_url
property that will mitigate this, but as of this writing is not implemented yet.
- NOTE: This may expose your extension to fingerprinting by other extensions or websites. Manifest V3 will support a
Development
This project uses pnpm for package management.
Lint
pnpm lint
Tests
pnpm test
Build
pnpm build