Skip to content

Releases: crxjs/chrome-extension-tools

@crxjs/[email protected]

06 May 22:46
Compare
Choose a tag to compare

Patch Changes

  • 8b2e587: check service worker on interval from extension page

@crxjs/[email protected]

04 May 16:57
Compare
Choose a tag to compare

Patch Changes

  • be8a1de: Remove unused code that throws when web accessible resources contains
    an HTML file.

[email protected]

28 Apr 13:37
d20c193
Compare
Choose a tag to compare

Patch Changes

  • ff71c47: fix error when importing existsSync from fs-extra

Supporting the Chrome Scripting API

19 Jan 16:39
Compare
Choose a tag to compare
Pre-release

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

v4.0.1-11...v4.0.1-12

Importing CSS to content scripts

17 Dec 22:58
Compare
Choose a tag to compare
Pre-release

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

v4.0.1-10...v4.0.1-11

Adding Renovate

16 Dec 23:22
Compare
Choose a tag to compare
Adding Renovate Pre-release
Pre-release

What's Changed

New Contributors

Full Changelog: v3.6.6...v4.0.1-10

Updating the docs for v4

15 Dec 22:51
Compare
Choose a tag to compare
Pre-release
  • 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

v4.0.1-8...v4.0.1-9

Beta testing Vite support

15 Dec 01:12
Compare
Choose a tag to compare
Pre-release

What's Changed

New Contributors

Full Changelog: v3.6.6...v4.0.1-8

Updating NPM readme

14 Dec 21:18
Compare
Choose a tag to compare
  • docs: add vite warning c558065
  • chore: update readme 254888d
  • chore: add keywords to package json ebf79ea

v3.6.6...v3.6.7

Getting close to stable

10 Dec 21:58
Compare
Choose a tag to compare
Pre-release

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

v4.0.1-4...v4.0.1-5

Full Changelog: v3.6.6...v4.0.1-5