### Install Dependencies with npm

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/playgrounds/react/README.md

Run this command to install all necessary project dependencies.

```bash
npm install
```

--------------------------------

### Start Local Development Server

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/README.md

Starts a local development server for live previewing changes. Most modifications are reflected without a server restart.

```bash
$ pnpm start
```

--------------------------------

### Manifest Paths - Valid Example

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/concepts/00-manifest.md

When specifying paths in your manifest, use paths that start with a letter. These paths are relative to the Vite project root.

```json
{
  "options_page": "options.html",
  "devtools_page": "pages/devtools.html"
}
```

--------------------------------

### Manifest Paths - Invalid Example

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/concepts/00-manifest.md

Avoid using relative paths (like `./`) or absolute paths for manifest entries. Paths should be relative to the Vite project root and start with a letter.

```json
{
  "options_page": "./options.html",
  "devtools_page": "/root/user/.../devtools.html"
}
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/README.md

Installs project dependencies using pnpm. This is the first step before running any other commands.

```bash
$ pnpm install
```

--------------------------------

### Enter Prerelease Mode with Changesets

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/RELEASES.md

Use this command to start a new prerelease series for a major version. Replace `<tag>` with your desired prerelease tag like `alpha`, `beta`, or `rc`.

```bash
pnpm changeset pre enter <tag>
```

--------------------------------

### Run Vite Development Server

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/_dev-basics-intro.md

Start the Vite development server to test your project in the browser. Ensure Vite is running in your terminal.

```bash
npm run dev
```

--------------------------------

### Install CRXJS Vite Plugin

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/react/00-create-project.md

Install the CRXJS Vite plugin as a development dependency.

```sh
npm install --save-dev @crxjs/vite-plugin
```

--------------------------------

### Content Script with Vanilla JS

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/vanilla-js/02-add-content-script.md

Create a content script using plain JavaScript. This example imports an image and CSS, then injects an HTML element with the image into the host page.

```javascript
import src from './image.png'
import './content.css'

const html = `
<div class="crx">
  <img src=${src}>
</div>
`

const doc = new DOMParser().parseFromString(html, 'text/html')
document.body.append(doc.body.firstElementChild)
```

--------------------------------

### Install CRXJS Vite plugin

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/solid/00-create-project.md

Install the CRXJS Vite plugin as a development dependency using npm.

```bash
npm i @crxjs/vite-plugin -D
```

--------------------------------

### Manifest with Unwanted Permissions

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Example of a manifest.json containing a permission that should be excluded.

```jsonc
// wrong permissions in output manifest.json
{
  "permissions": [
    "alarms", // This should not be here
    "storage"
  ]
}
```

--------------------------------

### Content Script CSS Styling

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/vanilla-js/02-add-content-script.md

Style the injected elements in your content script using CSS. This example styles the CRX logo image.

```css
.crx img {
  width: 3rem;
  height: 3rem;
}
```

--------------------------------

### Modify JSX for Content Script Styling (Solid)

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/solid/03-dev-content-script.md

Adjust your JSX to use a button element instead of an anchor tag to better control styling within content scripts. This example targets a specific CSS class for modification.

```jsx
<button
  class={styles.link}
  href="https://github.com/solidjs/solid"
  target="_blank"
  rel="noopener noreferrer"
>
  Learn Solid
</button>
```

--------------------------------

### Build for Production

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/playgrounds/react/README.md

Use this command to create a production-ready build of your Chrome extension.

```bash
npm run build
```

--------------------------------

### Build Static Content

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/README.md

Generates static content for deployment. The output is placed in the 'build' directory and can be served by any static hosting service.

```bash
$ pnpm build
```

--------------------------------

### Create a Changeset with pnpm

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/RELEASES.md

Run this command in the repository root after making release-worthy changes to create a new changeset file. Select affected packages and the appropriate semver bump.

```bash
pnpm changeset
```

--------------------------------

### Build Plugin Packages with pnpm

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/RELEASES.md

This command is used during the release process to build all packages tagged as 'plugin'. Ensure all plugin packages are built before publishing.

```bash
pnpm --filter "*plugin*" build
```

--------------------------------

### Create CRXJS Project with npm

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin/README.md

Use this command to create a new CRXJS project. Ensure `@latest` is included to avoid using outdated cached versions.

```shell
npm create crxjs@latest
```

--------------------------------

### Initialize chromeExtension Plugin

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Use `chromeExtension()` to initialize the plugin. Place it first in the plugins array as it processes the manifest file.

```javascript
import { chromeExtension } from 'rollup-plugin-chrome-extension'

export default {
  input: 'src/manifest.json',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [chromeExtension()],
}
```

--------------------------------

### Scaffold New Project with Vite

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/_create-project-tabs.mdx

Use npm to create a new Vite project. Follow the prompts to configure your project, especially if you are creating a specific type of project like a Chrome extension.

```bash
npm create vite@latest
```

--------------------------------

### Prerelease State Configuration

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/RELEASES.md

This JSON file indicates that the repository is in a prerelease state, specifying the mode, tag, and initial versions of packages. Changes are accumulated for a beta release.

```json
{
  "mode": "pre",
  "tag": "beta",
  "initialVersions": {
    "rollup-plugin-chrome-extension": "3.6.10",
    "@crxjs/vite-plugin": "1.0.14",
    "vite-plugin-docs": "0.0.2"
  },
  "changesets": [
    // List of changesets in prerelease mode
  ]
}
```

--------------------------------

### Create Manifest File

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/vue/00-create-project.md

Create a manifest.json file for your Chrome Extension. This file defines basic extension properties.

```json
{
  "manifest_version": 3,
  "name": "CRXJS Vue Vite Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" }
}
```

--------------------------------

### Manifest File

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/vanilla-js/00-create-project.md

Define the basic manifest.json for your Chrome Extension.

```json
{
  "manifest_version": 3,
  "name": "CRXJS Vanilla JS Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" }
}
```

--------------------------------

### Create CRXJS Project

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/README.md

Use this command to create a new CRXJS project. Ensure `@latest` is included to avoid using outdated versions.

```shell
npm create crxjs@latest

```

--------------------------------

### Create manifest.json

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/solid/00-create-project.md

Define your Chrome Extension's basic information and configuration in the manifest.json file.

```json
{
  "manifest_version": 3,
  "name": "CRXJS Solid Vite Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" }
}
```

--------------------------------

### Create Web Extension Manifest

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/react/00-create-project.md

Create a `manifest.json` file for your Chrome Extension. This file defines basic extension properties and the popup action.

```json
{
  "manifest_version": 3,
  "name": "CRXJS React Vite Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" }
}
```

--------------------------------

### Exit Prerelease Mode with Changeset

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/RELEASES.md

Execute this command to exit the current prerelease state of the repository. This prepares the project for stable releases.

```bash
pnpm changeset pre exit
```

--------------------------------

### Configure Web Accessible Resources

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Specify files to be accessible by the web, including fonts, HTML files, and globs for assets like images.

```jsonc
{
  "web_accessible_resources": [
    "fonts/some_font.oft",
    // HTML files are parsed like any other HTML file.
    "options2.html",
    // Globs are supported too!
    "**/*.png"
  ]
}
```

--------------------------------

### Manifest with Corrected Permissions

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

The resulting manifest.json after processing the prefixed permissions.

```jsonc
// correct permissions in output manifest.json
{
  "permissions": ["storage"]
}
```

--------------------------------

### Create Root Element for Solid App in Content Script

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/solid/02-add-content-script.md

When creating a content script, you need to manually create a root DOM element and append it to the document body before mounting your Solid app.

```jsx
import { render } from 'solid-js/web';

import './index.css';
import App from './App';

const root = document.createElement('div')
root.id = 'crx-root'
document.body.append(root)

render(
  () => <App />,
  // highlight-next-line
  root
);
```

--------------------------------

### Declare Content Script in manifest.json

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/vanilla-js/02-add-content-script.md

Define the content scripts for your extension in the manifest.json file. Specify the JavaScript files to execute and the match patterns for the host pages.

```json
{
  // other fields...
  "content_scripts": [
    {
      "js": ["src/content.js"],
      "matches": ["https://www.google.com/*"]
    }
  ]
}
```

--------------------------------

### Scaffold a new SolidJS Vite project

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/solid/00-create-project.md

Use degit to quickly scaffold a new SolidJS project with Vite. Choose between JavaScript or TypeScript templates.

```bash
npx degit solidjs/templates/js vite-solid-crxjs
```

```bash
npx degit solidjs/templates/ts vite-solid-crxjs
```

--------------------------------

### Publish Packages with Changeset

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/RELEASES.md

This command publishes the versioned packages to npm after they have been built. It is executed by the GitHub Action during the release process.

```bash
changeset publish
```

--------------------------------

### Import HTML as Raw Text

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/concepts/03-content-scripts.md

Import an HTML file as raw text using the `?raw` query for rendering complex HTML in a content script without a framework. This technique does not require the file to be web-accessible or declared in the Vite config.

```javascript
import html from './root.html?raw'

const iframe = new DOMParser().parseFromString(html).body.firstElementChild
iframe.src = chrome.runtime.getURL('pages/iframe.html')

document.body.append(iframe)
```

--------------------------------

### Configure manifest.json for Content Scripts

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/solid/02-add-content-script.md

Define content scripts in your manifest.json file, specifying the JavaScript files to execute and the match patterns for the pages where they should run.

```json
{
  // other fields...
  "content_scripts": [
    {
      "js": ["src/content.jsx"],
      "matches": ["https://www.google.com/*"]
    }
  ]
}
```

--------------------------------

### Configure Dynamic Import Wake Events

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Specify events that should wake the extension after dynamic imports have loaded. This ensures that critical events are not missed. The default includes 'chrome.runtime.onInstalled' and 'chrome.runtime.onMessage'.

```javascript
chromeExtension({
  dynamicImportWrapper: {
    wakeEvents: ['chrome.contextMenus.onClicked'],
  },
})
```

```javascript
chromeExtension({
  dynamicImportWrapper: {
    wakeEvents: ['chrome.runtime.onInstalled', 'chrome.runtime.onMessage'],
  },
})
```

--------------------------------

### chromeExtension Function

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Initializes the `rollup-plugin-chrome-extension`. It should be placed first in the Rollup plugins array as it processes the manifest file.

```APIDOC
## chromeExtension

### Description
Call this function to initialize `rollup-plugin-chrome-extension`. Always put it first in the plugins array, since it converts the manifest json file to an array of input files. See [Options API](#options-api) for config details.

### Method
`function`

### Arguments
- `options` (object) - Optional configuration options.

### Usage
```javascript
import { chromeExtension } from 'rollup-plugin-chrome-extension'

export default {
  input: 'src/manifest.json',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [chromeExtension()]
}
```
```

--------------------------------

### Configure Vite for Extra HTML Pages

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/concepts/01-pages.md

Add extra HTML pages to your Vite build by specifying them in `build.rollupOptions.input`. This ensures they are served during development and optimized in the production build.

```javascript
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        welcome: 'pages/welcome.html',
      },
    },
  },
})
```

--------------------------------

### Provide Package Information

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Manually provide package information (name, description, version) if not running Rollup via npm scripts. This is used to derive values for the extension manifest. It's not needed if npm provides this information via environment variables.

```javascript
const packageJson = require('./package.json')

chromeExtension({
  // Not needed if you use npm to run Rollup
  pkg: packageJson,
})
```

```javascript
chromeExtension({
  // Can be omitted if run using an npm script
})
```

--------------------------------

### dynamicImportWrapper.wakeEvents

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Specifies an array of string events that will wake (reactivate) the extension. These events are deferred until all background script modules have fully loaded when using dynamic imports.

```APIDOC
## dynamicImportWrapper.wakeEvents

### Description
Events that wake (reactivate) an extension may be lost if that extension uses dynamic imports to load modules or asynchronously adds event listeners. This option allows you to specify events that will wake your background page, ensuring they are not missed.

### Parameters
#### Request Body
- **wakeEvents** (string[]) - Required - List of events that will wake your background page (e.g., 'chrome.tabs.onUpdated', 'chrome.runtime.onInstalled'). The script module loader will defer them until after all the background script modules have fully loaded.

### Request Example
```javascript
chromeExtension({
  dynamicImportWrapper: {
    wakeEvents: ['chrome.contextMenus.onClicked'],
  },
})
```

### Response
#### Success Response (200)
N/A - This is a configuration option.

### Default Value
```javascript
[
  'chrome.runtime.onInstalled',
  'chrome.runtime.onMessage',
]
```
```

--------------------------------

### Configure Vite for HTML Input

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/concepts/03-content-scripts.md

Add HTML files to your Vite config under `build.rollupOptions.input`. This ensures that the HTML files are correctly processed and included in the build output.

```javascript
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        welcome: 'pages/iframe.html',
      },
    },
  },
})
```

--------------------------------

### Configure Dynamic Import Event Delay

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Set a delay in milliseconds after background script modules load before event listeners are triggered. This is useful for asynchronously added event listeners.

```javascript
chromeExtension({
  dynamicImportWrapper: {
    eventDelay: 50,
  },
})
```

--------------------------------

### Manifest web_accessible_resources Configuration

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Specifies files that should be accessible from web pages, ensuring they are written to the output directory.

```APIDOC
## Manifest web_accessible_resources

### Description
If you have files that are not imported to a script, or referenced directly in the manifest or an HTML file, add them to `web_accessible_resources`. They will be written to `output.dir` with the same folder structure as the source folder. Relative paths may not lead outside of the source folder.

### Example
```jsonc
{
  "web_accessible_resources": [
    "fonts/some_font.oft",
    "options2.html",
    "**/*.png"
  ]
}
```
```

--------------------------------

### Declare Web Accessible Resources in Manifest

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/concepts/03-content-scripts.md

Declare HTML files loaded from content scripts as web-accessible resources in the manifest.json. This configuration is required for the extension page to be accessible.

```json
{
  "web_accessible_resources": [
    {
      "resources": ["pages/iframe.html"],
      "matches": ["https://*.google.com/*"]
    }
  ]
}
```

--------------------------------

### Options: browserPolyfill

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Enables the inclusion of the promisified Browser API by Mozilla, enhancing cross-browser compatibility.

```APIDOC
## Options: browserPolyfill

### Description
Add the excellent [promisified Browser API]() by Mozilla to your Chrome extension with one easy option.

### Type
`boolean`

### Usage
```javascript
chromeExtension({
  browserPolyfill: true,
})
```

Don't forget to [install types](https://www.npmjs.com/package/@types/firefox-webext-browser) if you want Intellisense to work!
```

--------------------------------

### React 17: Render App in Content Script

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/react/02-add-content-script.md

For React versions prior to 18, this code demonstrates how to create a root DOM element and append it to the document body before rendering your React app.

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

// highlight-start
const root = document.createElement('div')
root.id = 'crx-root'
document.body.append(root)
// highlight-end

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  // highlight-next-line
  root,
)
```

--------------------------------

### Mount Vue App in Content Script

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/vue/02-add-content-script.md

Create a root DOM element and append it to the document body before mounting your Vue application. This is necessary for content scripts as they do not have an associated HTML file.

```javascript
import { createApp } from 'vue'
import App from './App.vue'

// highlight-start
const root = document.createElement('div')
root.id = 'crx-root'
document.body.append(root)
// highlight-end

const app = createApp(App)
// highlight-next-line
app.mount(root)

```

--------------------------------

### Manifest Permissions Configuration

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Allows exclusion of specific permissions from the final manifest file by prefixing them with '!'.

```APIDOC
## Manifest Permissions

### Description
Prefix unwanted permissions in the manifest with `"!"`, for example, `"!alarms"` to exclude them from the output manifest.

### Example

**Source manifest.json:**
```jsonc
{
  "permissions": [
    "!alarms", // This permission will be excluded
    "storage"
  ]
}
```

**Output manifest.json:**
```jsonc
{
  "permissions": ["storage"]
}
```
```

--------------------------------

### Manifest Configuration for Background Service Worker

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/concepts/02-background.md

Configure your extension's manifest.json to specify the background service worker. Ensure the type is set to 'module' for Vite compatibility.

```json
{
  "background": {
    "service_worker": "src/background.ts",
    "type": "module"
  }
}
```

--------------------------------

### dynamicImportWrapper.eventDelay

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Delays event page wake events by a specified number of milliseconds after all background page modules have finished loading. Useful for asynchronously added event listeners.

```APIDOC
## dynamicImportWrapper.eventDelay

### Description
Delay Event page wake events by `n` milliseconds after the all background page modules have finished loading. This may be useful for event listeners that are added asynchronously.

### Parameters
#### Request Body
- **eventDelay** (number | boolean) - Required - Delay Event page wake events by `n` milliseconds.

### Request Example
```javascript
chromeExtension({
  dynamicImportWrapper: {
    eventDelay: 50,
  },
})
```

### Response
#### Success Response (200)
N/A - This is a configuration option.
```

--------------------------------

### publicKey

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Sets the `manifest.key` value, which can be used to stabilize the extension ID during development.

```APIDOC
## publicKey

### Description
If truthy, `manifest.key` will be set to this value. Use this feature to stabilize the extension id during development. Note that this value is not the actual id; an extension id is derived from this value.

### Parameters
#### Request Body
- **publicKey** (string) - Required - The public key string to set for the extension.

### Request Example
```javascript
const p = process.env.NODE_ENV === 'production'

chromeExtension({
  publicKey: !p && 'mypublickey',
})
```

### Response
#### Success Response (200)
N/A - This is a configuration option.

### Default Value
```javascript
undefined
```
```

--------------------------------

### Enable Browser Polyfill

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Set `browserPolyfill: true` in the options to include the promisified Browser API from Mozilla.

```javascript
chromeExtension({
  browserPolyfill: true,
})
```

--------------------------------

### Define Manifest with TypeScript

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/concepts/00-manifest.md

Use `defineManifest` to dynamically configure your manifest. Supports autocompletion and async definitions. The version is converted from Semver to a format compatible with Chrome Extensions.

```typescript
import { defineManifest } from '@crxjs/vite-plugin'
import packageJson from './package.json'
const { version } = packageJson

// Convert from Semver (example: 0.1.0-beta6)
const [major, minor, patch, label = '0'] = version
  // can only contain digits, dots, or dash
  .replace(/[^-]+/g, '')
  // split into version parts
  .split(/[.-]/)

export default defineManifest(async (env) => ({
  manifest_version: 3,
  name:
    env.mode === 'staging'
      ? '[INTERNAL] CRXJS Power Tools'
      : 'CRXJS Power Tools',
  // up to four numbers separated by dots
  version: `${major}.${minor}.${patch}.${label}`,
  // semver is OK in "version_name"
  version_name: version,
}))
```

--------------------------------

### pkg

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Provides package information (name, description, version) to the Rollup plugin, typically used when not running Rollup via npm scripts.

```APIDOC
## pkg

### Description
Only use this field if you will not run Rollup using npm scripts (for example, `$ npm run build`), since npm provides scripts with the package info as an environment variable. The fields `name`, `description`, and `version` are used. These values are used to derive certain values from the `package.json` for the extension manifest. A value set in the source `manifest.json` will override a value from `package.json`.

### Parameters
#### Request Body
- **pkg** (object) - Required - An object containing package information, typically loaded from `package.json`.
  - **name** (string) - The name of the package.
  - **description** (string) - The description of the package.
  - **version** (string) - The version of the package.

### Request Example
```javascript
const packageJson = require('./package.json')

chromeExtension({
  // Not needed if you use npm to run Rollup
  pkg: packageJson,
})
```

### Response
#### Success Response (200)
N/A - This is a configuration option.
```

--------------------------------

### Exclude Permissions in Manifest

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Prefix permissions with '!' in your source manifest.json to exclude them from the final output manifest.

```jsonc
// source manifest.json
{
  "permissions": [
    "!alarms", // This permission will be excluded
    "storage"
  ]
}
```

--------------------------------

### Configure Vite for CRXJS

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/solid/00-create-project.md

Update your vite.config.js to include the CRXJS plugin and load your extension's manifest.json.

```javascript
import { defineConfig } from 'vite'
import solidPlugin from 'vite-plugin-solid'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [
    solidPlugin(),
    crx({ manifest }),
  ],
})
```

--------------------------------

### React 18+: Render App in Content Script

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/react/02-add-content-script.md

For React 18 and later, this code shows how to create a root DOM element and use createRoot to render your React application within the content script.

```jsx
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

// highlight-start
const root = document.createElement("div");
root.id = "crx-root";
document.body.appendChild(root);
// highlight-end

ReactDOM.createRoot(root).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

--------------------------------

### Vite Configuration

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/vanilla-js/00-create-project.md

Configure Vite to use the CRXJS plugin with your extension's manifest file.

```js
import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [crx({ manifest })],
})
```

--------------------------------

### Convert Static Asset to Extension URL

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/concepts/03-content-scripts.md

Convert imported static assets to the extension origin using the Chrome API. This is necessary because content scripts share the origin of the host page.

```javascript
import logo from './logo.png'
const url = chrome.runtime.getURL(logo)
```

--------------------------------

### Commit Changes for Exiting Prerelease Mode

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/RELEASES.md

After exiting prerelease mode, commit the changes and push them to a new branch. This will trigger the GitHub Action to create a 'Version Packages' PR.

```bash
git checkout -b exit-beta-mode
git add .
git commit -m "Exit beta prerelease mode"
git push -u origin exit-beta-mode
```

--------------------------------

### verbose

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Controls whether to display the 'Detected permissions' message. Set to false to suppress this message.

```APIDOC
## verbose

### Description
Set to `false` to suppress the 'Detected permissions' message that is logged during the build process.

### Parameters
#### Request Body
- **verbose** (boolean) - Required - Set to `false` to suppress the 'Detected permissions' message.

### Request Example
```javascript
chromeExtension({
  verbose: false,
})
```

### Response
#### Success Response (200)
N/A - This is a configuration option.

### Default Value
```javascript
true
```
```

--------------------------------

### Initialize Simple Reloader Plugin

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Add `simpleReloader()` after `chromeExtension()` to enable auto-reloading during development watch mode. It disables itself when Rollup is not in watch mode.

```javascript
import { chromeExtension, simpleReloader } from 'rollup-plugin-chrome-extension'

export default {
  input: 'src/manifest.json',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    chromeExtension(),
    // Reloader goes after the main plugin
    simpleReloader(),
  ],
}
```

--------------------------------

### Update Vite Configuration for CRXJS

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/react/00-create-project.md

Configure `vite.config.js` to include the CRXJS plugin and load the `manifest.json`. Ensure `"type": "module"` is set in `package.json` for Vite to build `vite.config.js` correctly.

```js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [
    react(),
    crx({ manifest }),
  ],
})
```

--------------------------------

### Set Public Key for Stable Extension ID

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Provide a public key string to stabilize the extension ID during development. The actual extension ID is derived from this value. The default is undefined.

```javascript
const p = process.env.NODE_ENV === 'production'

// Example usage
chromeExtension({
  publicKey: !p && 'mypublickey',
})
```

```javascript
chromeExtension({
  publicKey: undefined,
})
```

--------------------------------

### Disable Verbose Logging

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Set to false to suppress the 'Detected permissions' message during the build process. The default value is true.

```javascript
chromeExtension({
  verbose: false,
})
```

```javascript
chromeExtension({
  verbose: true,
})
```

--------------------------------

### Add CSS for Popup Width

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/vue/01-dev-basics.md

Add this CSS to your App.css file to increase the minimum width of your popup window, improving its usability during development.

```css
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  
  min-width: 350px;
}

```

--------------------------------

### Update Vite Configuration

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/vue/00-create-project.md

Configure vite.config.js to include the CRXJS plugin and load the manifest file. Ensure correct manifest import based on your Node.js version.

```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// highlight-start
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json' // Node 14 & 16
import manifest from './manifest.json' assert { type: 'json' } // Node >=17
// highlight-end

export default defineConfig({
  plugins: [
    vue(),
    // highlight-next-line
    crx({ manifest }),
  ],
})
```

--------------------------------

### Options: dynamicImportWrapper

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Configures the handling of dynamic imports, which is used for ES2015 modules and code splitting. Disabling this may affect code splitting capabilities.

```APIDOC
## Options: dynamicImportWrapper

### Description
We use dynamic imports to support ES2015 modules and [code splitting](https://medium.com/rollup/rollup-now-has-code-splitting-and-we-need-your-help-46defd901c82) for JS files. Only disable if you know what you're doing, because code splitting won't work if `dynamicImportWrapper === false`.

### Type
`object` or `false`
```

--------------------------------

### Declare Images in manifest.json

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/common/_get-url-for-images.mdx

Images used by content scripts must be declared in the `web_accessible_resources` field of your `manifest.json` file. This makes them accessible to the browser.

```json
"web_accessible_resources": [
  {
    "resources": [ "icons/*.png"],
    "matches": []
  }
]
```

--------------------------------

### Reference Images with chrome.runtime.getURL

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/common/_get-url-for-images.mdx

Use the `chrome.runtime.getURL` method in your content script to generate the correct URL for images declared in `web_accessible_resources`. This ensures images are loaded from the extension's origin, not the host page's origin.

```javascript
chrome.runtime.getURL('icons/logo.svg')
```

--------------------------------

### Inject Extension Page as Iframe

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/concepts/03-content-scripts.md

Inject an extension page into a host page using an iframe. The host page CSP does not affect the injected iframe. The injected extension page loads inside a cross-origin iframe and does not have direct access to the host page DOM.

```javascript
const src = chrome.runtime.getURL('pages/iframe.html')

const iframe = new DOMParser().parseFromString(
  `<iframe class="crx" src="${src}"></iframe>`,
).body.firstElementChild

document.body.append(iframe)
```

--------------------------------

### Vite HMR for JavaScript

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/vanilla-js/01-dev-basics.md

Add a counter button to test Vite's state preservation during JavaScript updates. Vite triggers a full page reload on save, but the popup remains open if devtools are inspected.

```javascript
import './style.css'

document.querySelector('#app').innerHTML = `
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
  // highlight-next-line
  <button>Count: 0</button>
`

// highlight-start
let count = 0
const button = document.querySelector('#app button')
button.addEventListener('click', () => {
  count++
  button.textContent = `Count: ${count}`
})
// highlight-end
```

--------------------------------

### VSCode JSON Schema Configuration

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/concepts/00-manifest.md

Configure VSCode to use the official Chrome Manifest JSON schema for autocompletion and validation by adding this to your settings.json file.

```json
{
  "json.schemas": [
    {
      "fileMatch": ["manifest.json"],
      "url": "https://json.schemastore.org/chrome-manifest.json"
    }
  ]
}
```

--------------------------------

### Add min-width to Popup CSS

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/solid/01-dev-basics.md

Apply this CSS to your popup's module file to increase its minimum width, improving usability during development. This change is immediately reflected due to Vite's HMR.

```css
.App {
  text-align: center;
  
  min-width: 350px;
}
```

--------------------------------

### simpleReloader Function

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/rollup-plugin/API.md

Provides an auto-reloading mechanism for Chrome extensions during development when Rollup is in watch mode. It disables itself when Rollup is not in watch mode.

```APIDOC
## simpleReloader

### Description
This reloader simply uses `setInterval` to fetch a local timestamp file every few seconds. When Rollup completes a new build, it changes the timestamp and the Chrome extension reloads itself. If Rollup is not in watch mode, `simpleReloader` disables itself.

### Method
`function`

### Call Signature
`() => SimpleReloaderPlugin | undefined`

### Usage
```javascript
import { chromeExtension, simpleReloader } from 'rollup-plugin-chrome-extension'

export default {
  input: 'src/manifest.json',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    chromeExtension(),
    // Reloader goes after the main plugin
    simpleReloader(),
  ]
}
```

Start Rollup in watch mode. Enjoy auto-reloading whenever Rollup makes a new build.
```

--------------------------------

### Vite HMR for CSS

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/vanilla-js/01-dev-basics.md

Vite provides HMR updates for imported styles without a full page reload, preserving the application state. Update styles.css to fix page layout while maintaining counter state.

```css
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  // highlight-next-line
  margin-top: 60px; /* Remove this line */

  // highlight-start
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 5px;
  // highlight-end
}
```

--------------------------------

### Isolate Content Script Styles (CSS)

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/solid/03-dev-content-script.md

Define CSS rules within `src/index.css` to scope styles to your content script's root element (`#crx-root`). This prevents styles from leaking into the host page and vice-versa.

```css
#crx-root {
  position: fixed;
  top: 3rem;
  left: 50%;
  transform: translate(-50%, 0);
}

#crx-root button {
  background-color: rgb(239, 239, 239);
  border-color: rgb(118, 118, 118);
  border-image: initial;
  border-style: outset;
  border-width: 2px;
  margin: 0;
  padding: 1px 6px;
}
```

--------------------------------

### Vite HMR for JavaScript in Content Script

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/vanilla-js/03-dev-content-script.md

Add HTML elements to your page using JavaScript. Vite will trigger a full page reload for JavaScript changes in content scripts if HMR is not explicitly supported by the framework.

```javascript
import logo from './crxjs-logo.png'
import './content.css'

const html = `
<div class="crx">
  <h1>Made with</h1>
  <img src=${logo}>
</div>
`

const doc = new DOMParser().parseFromString(html, 'text/html')
document.body.append(doc.body.firstChildElement)
```

--------------------------------

### Vite HMR for CSS in Content Script

Source: https://github.com/crxjs/chrome-extension-tools/blob/main/packages/vite-plugin-docs/docs/getting-started/vanilla-js/03-dev-content-script.md

Use this CSS to style elements injected by your content script. Vite's HMR will apply changes without a full page reload.

```css
.crx {
  position: fixed;
  bottom: 1rem;
  right: 1rem;

  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
}

.crx img {
  width: 3rem;
  height: 3rem;
}
```