Releases: crxjs/chrome-extension-tools
@crxjs/[email protected]
Patch Changes
- 8b2e587: check service worker on interval from extension page
@crxjs/[email protected]
Patch Changes
- be8a1de: Remove unused code that throws when web accessible resources contains
an HTML file.
[email protected]
Patch Changes
- ff71c47: fix error when importing
existsSync
fromfs-extra
Supporting the Chrome Scripting API
RPCE now supports the Chrome Scripting API, static asset imports in content scripts, and dynamic HTML files.
Script Imports and the Chrome Scripting API
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.
HTML Imports
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)
Content Scripts and Web Accessible Resources
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.
Commits
- Special import types (#187) da30c77
- Merge pull request #174 from extend-chrome/renovate/jest-html-reporters-2.x 3f442a9
- Merge pull request #171 from extend-chrome/renovate/chrome-0.x f81d3f5
- chore(deps): update dependency @types/chrome to v0.0.176 b08ff5b
- chore(deps): update dependency jest-html-reporters to v2.1.7 4400ac0
- Merge pull request #168 from extend-chrome/renovate/eslint-plugin-react-7.x d569021
- Merge pull request #170 from extend-chrome/renovate/react-17.x 71642b3
- Merge pull request #169 from extend-chrome/renovate/node-16.x a136992
- chore(deps): update dependency @types/react to v17.0.38 116a7b0
- chore(deps): update dependency @types/node to v16.11.17 271f440
- chore(deps): update dependency eslint-plugin-react to v7.28.0 9e58f7d
- chore(deps): update dependency vite to v2.7.6 1d70d10
- Merge pull request #166 from extend-chrome/renovate/vite-2.x 50720f1
- chore(deps): update dependency vite to v2.7.5 835647c
- Merge pull request #164 from extend-chrome/renovate/ws-8.x 88517dc
- chore(deps): update dependency ws to v8.4.0 bc1104a
- Merge pull request #165 from extend-chrome/renovate/node-16.x 742c8e5
- chore(deps): update dependency @types/node to v16.11.15 6405f99
- test: break up CI tests 791cf8a
- tests: comment for warning 3e38b5f
- Merge branch 'main' of github.com:extend-chrome/rollup-plugin-chrome-extension 1ac7985
- tests: close open handles after vite serve tests enable logs clean up test fixture build errors 7eb853c
- chore(deps): update dependency vite to v2.7.4 0853d9b
- fix(deps): update dependency jsonpath-plus to v6 1055cc7
Importing CSS to content scripts
CSS imports in content scripts
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 <style> 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.
- fix(deps): update dependency slash to v4 2696f37
- test: break ci tests into parts 31eac4e
- fix: don't replace hook every time beginStart runs b776c4a
- fix: eliminate terserOptions warning 3c0dba2
- feat: support more complex file structure e65e0fc
- feat: support css imports in content scripts 1b68d63
- fix: import crx manifest not vite manifest 7b0b99f
- fix: override build options in file writer 1cdae23
- refactor: enforce hybrid-format as post plugin 147d54a
- tests: increase test timeouts bbb6bb9
- tests: refactor tests 74af524
- tests: add tests for content script css imports 63b0f3f
- fix(deps): update dependency webextension-polyfill to ^0.8.0 8fb51e5
- fix(deps): update dependency esbuild to ^0.14.0 86567ca
- chore(deps): update dependency @types/node to v16 f503a5e
- fix(deps): update dependency cosmiconfig to v7 4db9f64
- fix(deps): update dependency fs-extra to v10 eda5e04
- chore(deps): update dependency @rollup/plugin-sucrase to v4 c27e606
- chore(deps): update dependency @testing-library/dom to v8 fff292c
- chore(deps): update dependency @types/fs-extra to v9 a79990a
- chore(deps): update dependency @types/prettier to v2 49da8a8
- chore(deps): update dependency jest-html-reporters to v2 00f9945
Adding Renovate
What's Changed
- RPCE 4.0 Vite Support & Plugin System by @jacksteamdev in #117
- Fix external XHR requests while using Vite and HMR by @remixz in #129
- Update v4 readme by @jacksteamdev in #128
- Configure Renovate by @renovate in #138
- chore(deps): pin dependencies by @renovate in #139
- chore(deps): pin dependency @types/jest to 27.0.3 by @renovate in #140
- fix(deps): update dependency json-ptr to v3 [security] by @renovate in #141
- chore(deps): update dependency @types/chrome to v0.0.171 by @renovate in #143
- Fix sw binary bug by @jacksteamdev in #145
- chore(deps): update dependency jest-chrome to v0.7.2 by @renovate in #144
New Contributors
Full Changelog: v3.6.6...v4.0.1-10
Updating the docs for v4
- Update README.md 2829f05
- Update README.md e990542
- docs: grammarly check 7c4d2d2
- feat: export default chromeExtension adcd4b3
- fix: ensure runtime reloader is added in vite serve 4efa0e8
- refactor: integrate simple reloader as runtime reloader 8f19357
- chore: make rollup normal dependency e972b52
- chore: update readme badges f591a40
- chore: update readme e596b63
Beta testing Vite support
What's Changed
- RPCE 4.0 Vite Support & Plugin System by @jacksteamdev in #117
- Fix external XHR requests while using Vite and HMR by @remixz in #129
New Contributors
Full Changelog: v3.6.6...v4.0.1-8
Updating NPM readme
Getting close to stable
Version 4 with full Vite support is just about ready!
To install: npm i rollup-plugin-chrome-extension@beta
See #117 for install details
- fix: export interface for types build cfe1b3f
- fix: make various stability improvements c79d4f7
- chore: update configs update typescript version add npm script 3378021
- refactor: refine machine concern files machine concern is orchestration asset machine concern is its own state f683183
- fix: order of build steps exclude files more reliably f753d62
- chore: update prettier config 6ee3504
- fix: spawn input html files after manifest parsed 196cdcf
- tests: force exit ci script e96c2c6
- fix: remove unused import 0cff812
- fix: dedupe added entries, allow excluded files at all times 8391cbd
- fix: try to avoid reference error 8892f05
- chore: update vite 6f46b2c
- tests: add html inputs test 982c801
- tests: fix snapshots e6ef047
- feat: load html pages from vite serve 91fe4ca
- refactor: move helper function 2bd248d
- refactor: rename emitted files map 5fe5085
- fix: resolve manifest dirname from root bc17030
- tests: mute console.error 0152081
- fix: avoid duplicate manifest file 76e39dd
- tests: move jest setup files to test folder 722cdea
- chore: don't bundle sourcemaps 5c11d45
- fix: remove unused import 30523b2
- fix: do not unsubscribe from stopped service f2afbdd
- fix: eliminate duplicate manifests 12ebc56
- fix: remove unused import 9c8bff0
- fix: handle errors more reliably 2fad191
Full Changelog: v3.6.6...v4.0.1-5