### Installing @samrum/vite-plugin-web-extension (Shell)

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

This command installs the `@samrum/vite-plugin-web-extension` package as a dependency in your project. It requires Vite 3+ to function correctly.

```sh
npm install @samrum/vite-plugin-web-extension
```

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

### Migrating addStyleTarget in JavaScript (New Usage)

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/MIGRATION.md

This snippet demonstrates the new recommended way to apply styles using `addViteStyleTarget` imported from `@samrum/vite-plugin-web-extension/client`. This replaces the old `addStyleTarget` functionality and should be used for applying styles.

```JavaScript
const { addViteStyleTarget } = await import(
    "@samrum/vite-plugin-web-extension/client"
  );

await addViteStyleTarget(shadowRoot);
```

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

### Adding Plugin Client Types in TypeScript

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/MIGRATION.md

This snippet shows how to add the necessary TypeScript type references for the plugin client to your `env.d.ts` file. This ensures proper type checking and autocompletion for plugin-specific functionalities.

```TypeScript
/// <reference types="@samrum/vite-plugin-web-extension/client" />
```

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

### Migrating addStyleTarget in JavaScript (Old Usage)

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/MIGRATION.md

This snippet shows the old usage of `addStyleTarget` imported from `/@vite/client`, which is no longer supported. It was previously used to apply styles to a shadow DOM.

```JavaScript
const { addStyleTarget } = await import("/@vite/client");

addStyleTarget(shadowRoot);
```

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

### Configuring Vite for Manifest V3 Web Extension (JavaScript)

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

This JavaScript snippet illustrates the `vite.config.js` setup for a web extension targeting Manifest V3. It configures the manifest to use a service worker for the background, which is the standard for Manifest V3.

```js
import { defineConfig } from "vite";
import webExtension from "@samrum/vite-plugin-web-extension";

export default defineConfig({
  plugins: [
    webExtension({
      manifest: {
        name: pkg.name,
        description: pkg.description,
        version: pkg.version,
        manifest_version: 3,
        background: {
          service_worker: "src/background/serviceWorker.js"
        }
      }
    })
  ]
});
```

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

### Configuring Additional Inputs with Vite Web Extension Plugin

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

This example demonstrates how to use the `additionalInputs` option within the `webExtension` configuration. It shows various ways to include scripts, controlling their web accessibility: defaulting to `true`, explicitly setting `true` or `false`, and using an object to exclude the entry file while keeping dependencies web accessible.

```TypeScript
webExtension({
  manifest: ...,
  additionalInputs: {
    scripts: [
      'src/entries/webAccessibleScript.js', // defaults to webAccessible: true
      {
        fileName: 'src/entries/webAccessibleScript2.js',
        webAccessible: true,
      },
      {
        fileName: 'src/entries/privateScript.js', // entry file and dependencies are not web accessible
        webAccessible: false,
      },
      {
        fileName: 'src/entries/entryFileExcluded.js', // entry file is not web accessible and dependencies are
        webAccessible: {
          matches: ['<all_urls>'],
          excludeEntryFile: true,
        },
      },
    ],
  },
})
```

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

### Initializing a New Vite Web Extension Project (Shell)

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

This command initializes a new Vite web extension project using the `@samrum/vite-plugin-web-extension` CLI. It supports choosing the Manifest version, TypeScript, and various frameworks like Preact, React, Solid, Svelte, Vanilla, or Vue.

```sh
npm init @samrum/vite-plugin-web-extension@latest
```

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

### Building Project with pnpm

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

Initiates the build process for the project using pnpm, compiling source code into a deployable web extension.

```sh
pnpm build
```

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

### Linting Project with pnpm

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

Runs the linting process for the project using pnpm to ensure code quality and adherence to style guidelines.

```sh
pnpm lint
```

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

### HTML Structure for Devtools Page (HTML)

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

This HTML snippet provides the basic structure for the `devtools_page` specified in the manifest. It includes a `div` for the application and script tags to load the main application entry point (`main.ts`) and the `devtools.js` script responsible for creating the devtools panel.

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

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

### Running Tests with pnpm

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

Executes the project's test suite using pnpm to verify functionality and prevent regressions.

```sh
pnpm test
```

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

### Creating a Devtools Panel (JavaScript)

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

This JavaScript code snippet demonstrates how to create a custom panel within the browser's developer tools. It checks for `chrome` or `browser` objects to ensure cross-browser compatibility and then uses `_browser.devtools.panels.create` to define the panel's title, icon, and content page.

```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
);
```

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

### Configuring Vite for Manifest V2 Web Extension (JavaScript)

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

This JavaScript snippet demonstrates how to configure `vite.config.js` to build a web extension targeting Manifest V2. It imports `defineConfig` from Vite and `webExtension` from the plugin, setting up the manifest with a background script.

```js
import { defineConfig } from "vite";
import webExtension from "@samrum/vite-plugin-web-extension";

export default defineConfig({
  plugins: [
    webExtension({
      manifest: {
        name: pkg.name,
        description: pkg.description,
        version: pkg.version,
        manifest_version: 2,
        background: {
          scripts: ["src/background/script.js"]
        }
      }
    })
  ]
});
```

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

### Adding TypeScript Type Reference for Vite Web Extension Plugin

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

To provide proper IntelliSense for plugin-specific `import.meta` variables and client functions, this TypeScript reference directive should be added to an `env.d.ts` file. It ensures that TypeScript understands the types exposed by the `@samrum/vite-plugin-web-extension/client` module.

```TypeScript
/// <reference types="@samrum/vite-plugin-web-extension/client" />
```

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

### Adding Devtools Page Entry to Manifest (JavaScript)

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

This JavaScript snippet shows how to add the `devtools_page` property to your extension's manifest. This property specifies the HTML page that will be loaded when the browser's developer tools are opened, allowing for custom devtools panels.

```js
devtools_page: "src/entries/devtools/index.html",
```

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

### Adding HMR Style Support to Shadow DOMs in Content Scripts (JavaScript)

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

This JavaScript snippet shows how to enable Hot Module Replacement (HMR) for styles within shadow DOMs in web extension content scripts. It conditionally imports `addViteStyleTarget` when HMR is active and uses it to register the shadowRoot of an element as a style target.

```JavaScript
if (import.meta.hot) {
  const { addViteStyleTarget } = await import(
    "@samrum/vite-plugin-web-extension/client"
  );

  await addViteStyleTarget(appContainer);
}
```

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

### Defining AdditionalInput Type for Vite Web Extension Plugin

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

This TypeScript type definition outlines the structure for the `additionalInputs` option, allowing developers to specify individual files or objects with `fileName` and `webAccessible` properties. The `webAccessible` property can configure `matches`, `extensionIds`, and `excludeEntryFile` for fine-grained control over resource accessibility.

```TypeScript
type AdditionalInput =
  | string
  | {
      fileName: string;
      webAccessible?
        | boolean
        | {
            matches: string[];
            extensionIds?: string[];
            excludeEntryFile?: boolean;
          }
        | {
            matches?: string[];
            extensionIds: string[];
            excludeEntryFile?: boolean;
          };
    };

additionalInputs?: {
  scripts?: AdditionalInput[];
  html?: AdditionalInput[];
  styles?: AdditionalInput[];
};
```

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

### Disabling Dynamic URLs for Web Accessible Resources in Firefox MV3 (JavaScript)

Source: https://github.com/samrum/vite-plugin-web-extension/blob/main/README.md

This configuration snippet is specific to Firefox's experimental Manifest V3 support. It sets `useDynamicUrlWebAccessibleResources` to `false` within the `webExtension` plugin options, as dynamic URLs are not supported for web accessible resources in Firefox MV3.

```js
webExtension({
          ...
          useDynamicUrlWebAccessibleResources: false
        }),
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.