WXT Examples

https://github.com/wxt-dev/examples
Admin
A collection of examples for WXT, a framework for building browser extensions, showcasing various...
Tokens:13,889
Snippets:55
Trust Score:6.9
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install and Run Project

Source: https://github.com/wxt-dev/examples/blob/main/examples/inject-script/README.md

Installs project dependencies using pnpm and then starts the development server. This is a common setup for running the project.

```sh
pnpm i
pnpm dev
```

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

### Install and Run Project

Source: https://github.com/wxt-dev/examples/blob/main/examples/get-started-page/README.md

Installs project dependencies using pnpm and starts the development server.

```sh
pnpm i
pnpm dev
```

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

### Install and Run with pnpm

Source: https://github.com/wxt-dev/examples/blob/main/examples/active-tab-screenshot/README.md

Install project dependencies using pnpm and start the development server. This setup is required to run the example.

```sh
pnpm i\npnpm dev
```

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

### Install and Run Project

Source: https://github.com/wxt-dev/examples/blob/main/examples/active-tab-content-script/README.md

Install dependencies using pnpm and start the development server.

```sh
pnpm i
pnpm dev
```

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

### Install and Run Project (pnpm)

Source: https://github.com/wxt-dev/examples/blob/main/examples/basic-messaging/README.md

Installs project dependencies using pnpm and starts the development server. This is typically the first step to get the example running.

```sh
pnpm i
pnpm dev
```

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

### Install and Run Project

Source: https://github.com/wxt-dev/examples/blob/main/examples/web-worker-setup/README.md

Installs project dependencies and starts the development server using pnpm.

```sh
pnpm i
pnpm dev
```

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

### Install and Run Project Commands (Shell)

Source: https://github.com/wxt-dev/examples/blob/main/examples/offscreen-document-setup/README.md

Provides essential commands for installing project dependencies and starting the development server.

```sh
pnpm i
pnpm dev
```

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

### Install and Run WXT Dev

Source: https://github.com/wxt-dev/examples/blob/main/examples/wxt-i18n/README.md

Installs project dependencies using pnpm and starts the development server for WXT.

```sh
pnpm i
pnpm dev
```

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

### Download and Run WXT Example

Source: https://github.com/wxt-dev/examples/blob/main/README.md

Instructions to download a specific WXT example from GitHub using `npx giget` and then navigate into the downloaded example's directory.

```sh
npx giget@latest gh:wxt-dev/examples examples/vue-overlay
cd vue-overlay
```

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

### Install and Run Vue Overlay

Source: https://github.com/wxt-dev/examples/blob/main/examples/vue-overlay/README.md

Installs project dependencies using pnpm and starts the development server for the Vue Overlay.

```sh
pnpm i
pnpm dev
```

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

### Install and Run Vanilla I18n

Source: https://github.com/wxt-dev/examples/blob/main/examples/vanilla-i18n/README.md

Installs project dependencies using pnpm and starts the development server for the Vanilla I18n example.

```sh
pnpm i
pnpm dev
```

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

### Install and Run Project

Source: https://github.com/wxt-dev/examples/blob/main/examples/dynamic-content-scripts/README.md

Installs project dependencies using pnpm and then starts the development server.

```sh
pnpm i
pnpm dev
```

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

### Install and Run Devtools Extension

Source: https://github.com/wxt-dev/examples/blob/main/examples/devtools-extension/README.md

Installs project dependencies using pnpm and starts the development server. This process enables the browser extension's functionality, making the 'Example Panel' and 'Example pane' visible in the devtools.

```sh
pnpm i
pnpm dev
```

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

### Install and Run Project

Source: https://github.com/wxt-dev/examples/blob/main/examples/vue-storage-composable/README.md

Install project dependencies using pnpm and start the development server. After running these commands, open the popup to observe the storage value updates.

```sh
pnpm i
pnpm dev
```

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

### Installation and Development Commands

Source: https://github.com/wxt-dev/examples/blob/main/examples/svelte-custom-store/README.md

Standard npm commands to install project dependencies and start the development server. These commands are executed in the terminal.

```sh
npm install
npm run dev
```

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

### Install and Run Project

Source: https://github.com/wxt-dev/examples/blob/main/examples/favicon-tracker/README.md

Installs project dependencies using pnpm and then starts the development server.

```sh
pnpm i
pnpm dev
```

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

### Install and Run Project Dependencies

Source: https://github.com/wxt-dev/examples/blob/main/examples/esm-content-script-ui/README.md

Installs project dependencies using pnpm and starts the development server. This is a common setup for modern JavaScript projects.

```sh
pnpm i
pnpm dev
```

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

### Install and Run with pnpm

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-mantine/README.md

Installs project dependencies using pnpm and starts the development server. The provided error logs during 'dev' can typically be ignored.

```sh
pnpm i
pnpm dev
```

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

### Install and Run Development

Source: https://github.com/wxt-dev/examples/blob/main/examples/browser-action-mount-ui/README.md

Installs project dependencies using pnpm and starts the development server.

```sh
pnpm i
pnpm dev
```

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

### Install and Run Project

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-content-script-ui/README.md

Installs project dependencies using pnpm and starts the development server.

```sh
pnpm i
pnpm dev
```

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

### Install and Run Project

Source: https://github.com/wxt-dev/examples/blob/main/examples/background-message-forwarder/README.md

Installs project dependencies using pnpm and starts the development server.

```sh
pnpm i
pnpm dev
```

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

### Install and Run TailwindCSS

Source: https://github.com/wxt-dev/examples/blob/main/examples/tailwindcss/README.md

Installs project dependencies using pnpm and starts the development server.

```sh
pnpm i
pnpm dev
```

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

### Navigate to Project and Install Dependencies

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

Commands to change the current directory into the newly created WXT project folder and install all project dependencies using pnpm.

```sh
cd react-shadcn
pnpm install
```

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

### Install Tailwind CSS and Vite Plugin

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

Installs Tailwind CSS and the `@tailwindcss/vite` plugin using pnpm, following the official Tailwind CSS installation guide for Vite projects.

```sh
pnpm install tailwindcss @tailwindcss/vite
```

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

### Install and Run Project

Source: https://github.com/wxt-dev/examples/blob/main/examples/svelte-state-rune/README.md

Installs project dependencies using npm and starts the development server.

```sh
npm install
npm run dev
```

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

### Install and Run Project

Source: https://github.com/wxt-dev/examples/blob/main/examples/offscreen-document-domparser/README.md

Installs project dependencies using pnpm and starts the development server.

```sh
pnpm i
pnpm dev
```

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

### Update WXT Example Metadata

Source: https://github.com/wxt-dev/examples/blob/main/README.md

Command to update the `metadata.json` file for WXT examples, ensuring it reflects the latest contributions and changes. This is a required step before merging pull requests for new examples.

```sh
pnpm -w update-metadata
```

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

### Install and Run Tests

Source: https://github.com/wxt-dev/examples/blob/main/examples/vitest-unit-testing/README.md

Installs project dependencies using pnpm and then executes the unit tests.

```sh
pnpm i
pnpm test
```

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

### WXT Project Initialization CLI Output

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

Example output from the WXT CLI during project initialization, confirming the project creation with the chosen template and package manager.

```sh
WXT 0.20.6
ℹ Initializing new project
✔ Project Directory … react-shadcn
✔ Choose a template › react
✔ Package Manager › pnpm
✔ Downloading template
✨ WXT project created with the react template.
Next steps:
  1. cd react-shadcn
  2. pnpm install
```

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

### Install and Run Project

Source: https://github.com/wxt-dev/examples/blob/main/examples/content-script-session-storage/README.md

Install project dependencies using pnpm and start the development server. After running these commands, observe session storage logs on duckduckgo.com.

```sh
pnpm i
pnpm dev
```

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

### Develop All Apps and Packages

Source: https://github.com/wxt-dev/examples/blob/main/examples/monorepo-turbo/README.md

Starts the development servers for all applications and packages in the monorepo. This command is used for local development and testing of the monorepo's components.

```sh
cd my-turborepo
pnpm dev
```

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

### Install and Run Project

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-content-ui-custom-font/README.md

Commands to install dependencies and start the development server using pnpm.

```sh
pnpm i
pnpm dev
```

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

### Create Turborepo Monorepo

Source: https://github.com/wxt-dev/examples/blob/main/examples/monorepo-turbo/README.md

Command to initialize a new Turborepo monorepo project. This sets up the basic structure and configuration for a monorepo managed by Turborepo.

```sh
npx create-turbo@latest
```

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

### Install and Run WXT Dev Container

Source: https://github.com/wxt-dev/examples/blob/main/examples/devcontainers/README.md

Installs project dependencies using pnpm, sets the CHROME_PATH environment variable by downloading a stable Chrome version via Puppeteer, and starts the WXT development server with specific flags. This process prepares the WXT browser extension for local development within a dev container environment.

```sh
pnpm i
export CHROME_PATH=$(pnpm dlx @puppeteer/browsers install chrome@stable | awk '{print $2}')
CHROME_EXTRA_FLAGS='--no-sandbox' pnpm dev
```

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

### Initialize Shadcn UI

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

Run this command in your terminal to start the Shadcn UI initialization process. You will be prompted to answer configuration questions.

```sh
pnpm dlx shadcn-ui@latest init
```

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

### Build All Apps and Packages

Source: https://github.com/wxt-dev/examples/blob/main/examples/monorepo-turbo/README.md

Executes the build process for all applications and packages defined within the Turborepo monorepo. This command is typically run from the monorepo's root directory.

```sh
cd my-turborepo
pnpm build
```

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

### Install and Run E2E Tests

Source: https://github.com/wxt-dev/examples/blob/main/examples/playwright-e2e-testing/README.md

This snippet demonstrates the necessary commands to set up and execute end-to-end tests for an extension using Playwright. It includes installing dependencies (`pnpm i`), building the extension (`pnpm build`), installing Playwright browser binaries (`pnpm exec playwright install`), and running the end-to-end tests (`pnpm e2e`). The `--ui` flag can be used to run tests with the Playwright UI mode (`pnpm e2e --ui`). Ensure the extension is built before running tests.

```shell
pnpm i
pnpm build
pnpm exec playwright install
pnpm e2e
pnpm e2e --ui
```

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

### Initialize WXT Project with pnpm

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

Command to initialize a new WXT project using pnpm. The CLI prompts for project directory, template (e.g., 'react'), and package manager.

```sh
pnpm dlx wxt@latest init
```

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

### Install Storybook and Vite Builder (Shell)

Source: https://github.com/wxt-dev/examples/blob/main/examples/storybook/README.md

Installs Storybook and its necessary dependencies using pnpm. This includes the core Storybook package and the Vite builder for WXT projects.

```sh
pnpm i
pnpm storybook
pnpm i @storybook/builder-vite
pnpm dlx storybook@latest init
```

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

### Add Shadcn UI Components

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

Use this command to add specific Shadcn UI components to your project. Replace 'button' with the desired component name. This command installs the component and its dependencies.

```sh
pnpm dlx shadcn-ui@latest add button
```

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

### Authenticate for Remote Caching

Source: https://github.com/wxt-dev/examples/blob/main/examples/monorepo-turbo/README.md

Logs the Turborepo CLI into a Vercel account, which is a prerequisite for enabling and using Turborepo's remote caching feature to share build caches across machines.

```sh
cd my-turborepo
npx turbo login
```

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

### Include Tailwind CSS in index.html

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

Shows how to link the `tailwind.css` file directly in the `index.html` file using a configured alias, providing an alternative to component-level imports.

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="@/assets/tailwind.css" rel="stylesheet" />
  </head>
  <body></body>
</html>
```

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

### Temporary Vite Configuration for Shadcn CLI

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

Creates a temporary `vite.config.ts` file with essential Vite plugins (React, Tailwind CSS) to satisfy the Shadcn CLI's detection mechanism for project type.

```ts
import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {

```

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

### Create Tailwind CSS Import File

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

Creates a `tailwind.css` file, typically in the `assets` directory, containing the `@import "tailwindcss";` directive to enable Tailwind CSS utility classes.

```css
@import "tailwindcss";
```

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

### Link Turborepo to Remote Cache

Source: https://github.com/wxt-dev/examples/blob/main/examples/monorepo-turbo/README.md

Links the current Turborepo project to its configured remote cache. This command enables Turborepo to push and pull build artifacts from a remote cache, typically hosted on Vercel.

```sh
cd my-turborepo
npx turbo link
```

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

### Import Tailwind CSS in React Component

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

Demonstrates importing the `tailwind.css` file into a React component using a configured alias (`@/assets/tailwind.css`).

```ts
import "@/assets/tailwind.css"; // Adjust the path if necessary
```

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

### Configure tsconfig.json for Aliases

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

Updates `tsconfig.json` within `compilerOptions` to define `baseUrl` and `paths`, enabling module resolution for aliases like `@/*`.

```json
"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@/*": ["./*"] // or "./src/*" if using src directory
  }
}
```

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

### Configure WXT with Tailwind CSS Plugin

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

Modifies `wxt.config.ts` to integrate Tailwind CSS by adding it as a Vite plugin. This ensures Tailwind is processed correctly within the WXT build pipeline.

```ts
import { defineConfig } from "wxt";
import tailwindcss from "@tailwindcss/vite";
// See https://wxt.dev/api/config.html
export default defineConfig({
  modules: ["@wxt-dev/module-react"],
  vite: () => ({
    plugins: [tailwindcss()]
  })
});
```

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

### Temporary Vite Configuration for Shadcn UI

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

This temporary `vite.config.ts` file is created to ensure Shadcn CLI correctly identifies the project as a Vite project and configures path aliases. It should be deleted after Shadcn UI initialization.

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";
import path from "path";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./"), // or "./src" if using src directory
    },
  },
});
```

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

### Integrate ESLint React Plugin for Type-Aware Linting in Vite

Source: https://github.com/wxt-dev/examples/blob/main/examples/monorepo-turbo/apps/web/README.md

This snippet demonstrates integrating the `eslint-plugin-react` into an ESLint configuration for a Vite project. It sets the React version, adds the plugin, and enables its recommended rules for improved React linting and code quality.

```javascript
// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})
```

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

### Configure WXT Alias Resolution with Path Module

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

Updates `wxt.config.ts` to include Vite's `resolve.alias` configuration, mapping the `@` alias to the project's root directory using Node.js's `path` module.

```ts
import { defineConfig } from "wxt";
import tailwindcss from "@tailwindcss/vite";
import path from "path";

// See https://wxt.dev/api/config.html
export default defineConfig({
  modules: ["@wxt-dev/module-react"],
  vite: () => ({
    plugins: [tailwindcss()],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./"), // or "./src" if using src directory
      }
    }
  })
});
```

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

### Configure ESLint parserOptions for Type-Aware Linting in Vite

Source: https://github.com/wxt-dev/examples/blob/main/examples/monorepo-turbo/apps/web/README.md

This snippet shows how to configure ESLint's `parserOptions` to enable type-aware linting rules in a Vite project. It requires `tseslint` and specifies TypeScript project configurations and the root directory for accurate linting.

```javascript
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

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

### WXT and Shadcn UI Path Configuration Workaround

Source: https://github.com/wxt-dev/examples/blob/main/examples/react-shadcn/README.md

This section shows the recommended configuration changes for `tsconfig.json` and `wxt.config.ts` to work around Shadcn UI's path resolution issues. The original paths in `tsconfig.json` are commented out, and the alias is added to `wxt.config.ts`.

```typescript
// tsconfig.ts
{
  "extends": "./.wxt/tsconfig.json",
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```

```typescript
// wxt.config.ts
export default defineConfig({
  modules: ["@wxt-dev/module-react"],
  alias: {
    "@": path.resolve(__dirname, "./"),
  },
  vite: () => ({
    plugins: [tailwindcss()],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./"),
      },
    },
  }),
});
```

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

### Configure Storybook Vite Builder Path (Diff)

Source: https://github.com/wxt-dev/examples/blob/main/examples/storybook/README.md

Modifies the Storybook main configuration file to point to the custom Vite configuration. This ensures Storybook uses the correct build settings for WXT.

```diff
framework: {
  name: "@storybook/react-vite",
  options: {
    builder: {
      viteConfigPath: ".storybook/vite.config.ts",
    },
  },
}
```

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

### Emit Custom Events with JavaScript

Source: https://github.com/wxt-dev/examples/blob/main/examples/svelte-state-rune/index.html

This snippet demonstrates how to emit a custom event named 'counter:updated' every second. It uses `setInterval` to increment a counter and dispatches a `CustomEvent` with the counter value in its `detail` property. This is useful for inter-component communication or triggering actions based on timed events in a web application.

```javascript
let counter = 0;
setInterval(() => {
  document.dispatchEvent(
    new CustomEvent("counter:updated", { detail: { counter: counter++, }, })
  );
}, 1000);
```
Tokens:
Raw