Skip to content

Supporting the Chrome Scripting API

Pre-release
Pre-release
Compare
Choose a tag to compare
@jacksteamdev jacksteamdev released this 19 Jan 16:39
· 405 commits to main since this release
v4.0.1-12
1c153fd

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

Assets 2
Loading