chrome-extension-tools

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

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v4.0.1-11...v4.0.1-12

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 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

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v4.0.1-10...v4.0.1-11

What's Changed

• RPCE 4.0 Vite Support & Plugin System by @jacksteamdev in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/117
• Fix external XHR requests while using Vite and HMR by @remixz in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/129
• Update v4 readme by @jacksteamdev in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/128
• Configure Renovate by @renovate in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/138
• chore(deps): pin dependencies by @renovate in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/139
• chore(deps): pin dependency @types/jest to 27.0.3 by @renovate in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/140
• fix(deps): update dependency json-ptr to v3 [security] by @renovate in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/141
• chore(deps): update dependency @types/chrome to v0.0.171 by @renovate in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/143
• Fix sw binary bug by @jacksteamdev in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/145
• chore(deps): update dependency jest-chrome to v0.7.2 by @renovate in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/144

New Contributors

• @remixz made their first contribution in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/129
• @renovate made their first contribution in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/138

Full Changelog: https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.6...v4.0.1-10

• 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

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v4.0.1-8...v4.0.1-9

What's Changed

• RPCE 4.0 Vite Support & Plugin System by @jacksteamdev in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/117
• Fix external XHR requests while using Vite and HMR by @remixz in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/129

New Contributors

• @remixz made their first contribution in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/129

Full Changelog: https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.6...v4.0.1-8

• docs: add vite warning c558065
• chore: update readme 254888d
• chore: add keywords to package json ebf79ea

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.6...v3.6.7

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

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

What's Changed

• Don't change content-script file names when not wrapping by @kjaris in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/126

New Contributors

• @kjaris made their first contribution in https://github.com/extend-chrome/rollup-plugin-chrome-extension/pull/126

Full Changelog: https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.5...v3.6.6

This PR makes it easier to load manifests as TS files.

• Switch to esbuild runner (#109) 499e170

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.1...v3.6.2

We have a new docs site! Check it out at https://extend-chrome.dev/rollup-plugin

• docs: fix badge alt text 7c7c71a
• docs: update README to point to docsite d430d87

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0...v3.6.1

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! 🙏

Commits

• Beta MV3 Support (#94) 7ed4e7b

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.5.7...v3.6.0

This release irons out some MV3 content script bugs.

• feat: simplify MV3 content script approach 2f149dc
• fix duplicate map calls e50361a
• fix duplicate match patterns 977c787
• fix: convert content script match patterns (#100) 620c076
• fix deprecation warning condition 9d71dda

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-7...v3.6.0-8

Beta Testing

You can install this branch on npm:

npm i rollup-plugin-chrome-extension@beta -D

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

Beta Testing

You can install this branch on npm:

npm i rollup-plugin-chrome-extension@beta -D

• fix build errors 1459819
• Manifest as ts files (#99) c728170
• fix: warn deprecated feature correctly 251f219
• fix: remove debugging line ca40bc9

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-6...v3.6.0-7

Fixes a schema bug that didn't validate content script match patterns with ports (eg, http://localhost:5000).

• fix: allow ports in schema url match patterns 85d7bb1
• chore: fix build error 3289f25

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-5...v3.6.0-6

This release adds the ability to build MV3 extensions 🎉

Beta Testing

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.

• Build MV3 extensions (#98) 19d5e6b

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-3...v3.6.0-5

This release will be available on npm:

npm i [email protected] -D

• Remove prettier (#96) ffac992
• Support locales (#95) 69eaf20

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-2...v3.6.0-3

This release adds the ability to parse MV3. It still won't output MV3, but we're one step closer 😅

• MV3 Parser (#93) ffdef7b
• Update test fixtures for MV3 (#92) 9bb1057
• chore: fix tsconfig one last time b3d17df

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-1...v3.6.0-2

This release adds a JSON schema that supports MV3.

• chore: remove aliases b9a3b3f
• chore: add alias to jest c55cbc8
• chore: fix types build step 25a9519
• chore: remove comment from rollup config e28e7f2
• chore: support node >= 12 0a876fc
• chore: include schema on npm ecb2538
• Fix integration bugs with new schema (#90) e83143c
• Add MV3 types and JSON schema (#89) fc83a2f

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.6.0-0...v3.6.0-1

• tests: wait for reloader delay skip delay if delay is 0 b0d6e26
• fix: delay reload by 100ms b9a34e2

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.5.7...v3.6.0-0

This is a bugfix to start adding Firefox support. See #75 and #56 for more information.

• Don't call Object.keys on null in getDeepMatches 89b5b97
• chore: pin cheerio 8f641a1

https://github.com/extend-chrome/rollup-plugin-chrome-extension/compare/v3.5.6...v3.5.7