vite-plugin-web-extension

To add content to the browser developer tools, add a devtools_page entry to your manifest pointing to an HTML file.

1. Manifest: Add devtools_page: "src/entries/devtools/index.html".
2. Setup Script: Place a devtools.js file in your public directory to create the panel.
3. HTML: Load the devtools.js script within your devtools HTML file.

Example public/devtools.js:

var _browser;
if (chrome) {
  _browser = chrome;
} else {
  _browser = browser;
}
_browser.devtools.panels.create(
  "My Panel", // title
  "images/icon-16.png", // icon
  "src/entries/devtools/index.html" // content
);

Example src/entries/devtools/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Devtools</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.ts"></script>
    <script src="/devtools.js"></script>
  </body>
</html>

When upgrading from version 0.x.x to 1.0.0, apply the following breaking changes:

• Upgrade Vite: Upgrade Vite to version 2.9.x or higher and upgrade any Vite framework plugins.
• Update CSS URL imports: Replace import.meta.CURRENT_CONTENT_SCRIPT_CSS_URL with import.meta.PLUGIN_WEB_EXT_CHUNK_CSS_PATHS. Note that import.meta.PLUGIN_WEB_EXT_CHUNK_CSS_PATHS returns an array of strings at build time, so update your code to handle an array instead of a single string.
• Update Style Target API: Replace the addStyleTarget function from /@vite/client with addViteStyleTarget from @samrum/vite-plugin-web-extension/client.
• TypeScript Setup: If using TypeScript, add the plugin client types to your env.d.ts file.

// Replace old style target usage:
// const { addStyleTarget } = await import("/@vite/client");
// addStyleTarget(shadowRoot);

// With new usage:
const { addViteStyleTarget } = await import(
  "@samrum/vite-plugin-web-extension/client"
);

await addViteStyleTarget(shadowRoot);

// And update env.d.ts:
/// <reference types="@samrum/vite-plugin-web-extension/client" />

The ManifestParser is an abstract class responsible for transforming a web extension manifest by identifying all necessary entry points (scripts, HTML, CSS) and ensuring they are correctly handled by Vite/Rollup.

It operates in two main phases:

1. parseInput(): Analyzes the initial manifest to identify all input files (background scripts, content scripts, HTML files, and additionalInputs) that Vite needs to process.
2. parseOutput(bundle): Analyzes the Rollup output bundle to resolve final filenames, handle CSS/asset dependencies, and optimize web_accessible_resources.

Key behaviors:

• Background Scripts: It automatically handles background scripts by wrapping them in an HTML loader to support event pages (specifically for Firefox Manifest V3 support).
• Content Scripts: It parses content_scripts to ensure both .js and .css files are included in the build process.
• Web Accessible Resources: If optimizeWebAccessibleResources is enabled in the plugin options, it automatically manages the web_accessible_resources field based on the assets used by chunks.