Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
Bot releases are hidden (Show)
Published by jacksteamdev over 2 years ago
RPCE now supports the Chrome Scripting API, static asset imports in content scripts, and dynamic HTML files.
Chrome recently added a new Scripting API for MV3 Chrome Extensions that supports dynamic content scripts.
You can now import a script file with the ?script
query. RPCE will bundle the script, and the import will return a file path as the default export. This works in all script contexts: background, content, popup pages, etc.
// background.ts
import scriptFilePath from "./dynamic-script.ts?script"
const tabId = getTabId();
chrome.scripting.executeScript(
{
target: {tabId: tabId},
files: [scriptFilePath],
},
() => { ... });
If you need to inject a main-world script, import a script file into a content script and set it as the source for a script tag. This script will execute in the host page's main execution context, with access to global variables, etc. Make sure to get the Chrome Extension URL by calling chrome.runtime.getURL
.
// content-script.ts
import mainWorld from "./main-world-script.ts?script"
const src = chrome.runtime.getURL(mainWorld)
const script = document.createElement('script')
script.src = src
document.body.append(script)
The same web access restrictions apply to dynamic content scripts, so RPCE will add a new entry in web_accessible_resources
when it finds a content script not declared in the manifest. The default match pattern is all HTTP and HTTPS pages. However, you can customize the match pattern by using the resource placeholder <dynamic_scripts>
in web_accessible_resources
:
{
"web_accessible_resources": [
{
"resources": ["<dynamic_scripts>"],
"matches": ["https://google.com/*", "https://github.com/*"]
}
]
}
Auto-reloading does not work on dynamic scripts yet, but that is coming soon.
Sometimes it is necessary to include an HTML page in your extension, but there's nowhere to put it in the manifest, e.g., a devtools panel or an iframe in a content script. Now you can import an HTML page, and RPCE will bundle it.
// content-script.ts
import html from "./iframe.html"
const src = chrome.runtime.getURL(html)
const iframe = document.createElement('iframe')
iframe.src = src
document.body.append(script)
This release adds content script support for any static asset import that Vite supports. If a content script uses an external image or CSS file, the manifest must declare those files as web accessible resources. RPCE analyzes the resources for each content script and adds those exact files to the manifest; only matching host pages can access those resources.
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v4.0.1-11...v4.0.1-12
Published by jacksteamdev almost 3 years ago
This release adds support for CSS imports in content scripts! Since Vite does the heavy lifting for CSS imports, we get PostCSS, CSS Modules, and CSS Pre-processor support in content scripts for free! In addition, the content script is using proper CSS, not CSS-in-JS, so your Chrome Extension will be faster.
When a file imports a CSS file in a standard Vite project, it adds CSS as a tag to the output HTML file. Vite converts the actual CSS file and outputs it as an asset. In a content script, there is no HTML file. Instead, each content script can define CSS files to inject under the script.css property. RPCE resolves output CSS files to their respective importing content scripts and adds them to the manifest's corresponding script object. Chrome injects these CSS files at the same time as the JS scripts.
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v4.0.1-10...v4.0.1-11
Published by jacksteamdev almost 3 years ago
Full Changelog: https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.6...v4.0.1-10
Published by jacksteamdev almost 3 years ago
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v4.0.1-8...v4.0.1-9
Published by jacksteamdev almost 3 years ago
Full Changelog: https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.6...v4.0.1-8
Published by jacksteamdev almost 3 years ago
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.6...v3.6.7
Published by jacksteamdev almost 3 years ago
Version 4 with full Vite support is just about ready!
To install: npm i rollup-plugin-chrome-extension@beta
See #117 for install details
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v4.0.1-4...v4.0.1-5
Full Changelog: https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.6...v4.0.1-5
Published by jacksteamdev almost 3 years ago
Full Changelog: https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.5...v3.6.6
Published by jacksteamdev about 3 years ago
This PR makes it easier to load manifests as TS files.
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.1...v3.6.2
Published by jacksteamdev about 3 years ago
We have a new docs site! Check it out at https://extend-chrome.dev/rollup-plugin
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0...v3.6.1
Published by jacksteamdev about 3 years ago
MV3 support is now available in the main
branch! 🎉
We haven't written the docs yet, but no special config is required. Even the simple reloader works, but only if a content script is open.
You can try it out on NPM:
npm i rollup-plugin-chrome-extension@latest -D
All that is required is a valid MV3 manifest.json
file. If you want to use our JSON schema in VSCode to get auto-completion and validation, add the following to .vscode/settings.json
:
{
"json.schemas": [
{
"fileMatch": ["manifest.json"],
"url": "https://raw.githubusercontent.com/extend-chrome/rollup-plugin-chrome-extension/main/manifest.schema.json"
}
],
}
Please report any issues you encounter! 🙏
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.5.7...v3.6.0
Published by jacksteamdev about 3 years ago
This release irons out some MV3 content script bugs.
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-7...v3.6.0-8
You can install this branch on npm:
npm i rollup-plugin-chrome-extension@beta -D
Published by jacksteamdev about 3 years ago
This release adds support for manifest files as TS files in addition to JSON files.
Type checking and environment variables are here!
// rollup.config.js
export default {
input: 'manifest.ts',
output: { ... }
}
// manifest.ts
import { ManifestV3 } from 'rollup-plugin-chrome-extension'
const config: ManifestV3 = {
content_scripts: [
{
js: ['content.ts'],
matches: ['https://*/*', 'http://*/*'],
},
],
manifest_version: 3,
}
export default config
You can install this branch on npm:
npm i rollup-plugin-chrome-extension@beta -D
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-6...v3.6.0-7
Published by jacksteamdev about 3 years ago
Fixes a schema bug that didn't validate content script match patterns with ports (eg, http://localhost:5000
).
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-5...v3.6.0-6
Published by jacksteamdev about 3 years ago
This release adds the ability to build MV3 extensions 🎉
You can install this branch on npm:
npm i rollup-plugin-chrome-extension@beta -D
Please note, this release is BETA. Use at your own risk.
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-3...v3.6.0-5
Published by jacksteamdev about 3 years ago
This release will be available on npm:
npm i [email protected] -D
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-2...v3.6.0-3
Published by jacksteamdev about 3 years ago
This release adds the ability to parse MV3. It still won't output MV3, but we're one step closer 😅
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-1...v3.6.0-2
Published by jacksteamdev about 3 years ago
This release adds a JSON schema that supports MV3.
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-0...v3.6.0-1
Published by jacksteamdev about 3 years ago
https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.5.7...v3.6.0-0
Published by jacksteamdev over 3 years ago
This is a bugfix to start adding Firefox support. See #75 and #56 for more information.
Object.keys
on null
in getDeepMatches
89b5b97https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.5.6...v3.5.7