Getting Started

Introduction

vite-plugin-web-extension allows you to construct a complete Chrome extension by providing a single plugin to your build configuration.

import webExtension from "vite-plugin-web-extension";

export default defineConfig({
  plugins: [webExtension()],
});

import webExtension from "vite-plugin-web-extension";

export default defineConfig({
  plugins: [webExtension()],
});

INFO

This plugin is fully compatible with all other Vite plugins. You can include them in the list of plugins in any order you prefer.

Create a New Project

To get started, bootstrap a project using one of the templates:

PNPMYARNNPM

bash

pnpm create vite-plugin-web-extension

pnpm create vite-plugin-web-extension

bash

yarn create vite-plugin-web-extension

yarn create vite-plugin-web-extension

bash

npm create vite-plugin-web-extension

npm create vite-plugin-web-extension

Templates

There are several starter templates to choose from:

Javascript	Typescript
`vanilla-js`	`vanilla-ts`
`vue-js`	`vue-ts`
`react-js`	`react-ts`
`svelte-js`	`svelte-ts`

After the initialization, you can run pnpm dev to open a browser and install the extension in development mode, or pnpm build to bundle your extension for production.

Setting Up a Project Manually

If you prefer, you can also set up your project manually. Follow these steps:

Create a package.json:

json

{
  "name": "Example Extension",
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build"
  }
}

{
  "name": "Example Extension",
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build"
  }
}

Install Vite, the plugin, and other dependencies:

bash

pnpm i vite vite-plugin-web-extension
pnpm i webextension-polyfill

pnpm i vite vite-plugin-web-extension
pnpm i webextension-polyfill

Create a manifest.json and your entry points:

json

// manifest.json
{
  "name": "Example Extension",
  "version": "1.0.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "src/background.ts"
  },
  "options_page": "src/options.html"
}

// manifest.json
{
  "name": "Example Extension",
  "version": "1.0.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "src/background.ts"
  },
  "options_page": "src/options.html"
}

// src/background.ts
import browser from "webextension-polyfill";

browser.runtime.onInstalled.addListener(() => {
  console.log("Installed!");
});

// src/background.ts
import browser from "webextension-polyfill";

browser.runtime.onInstalled.addListener(() => {
  console.log("Installed!");
});

html

<!-- src/options.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Project Name</title>
  </head>
  <body>
    Hello world!
  </body>
</html>

<!-- src/options.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Project Name</title>
  </head>
  <body>
    Hello world!
  </body>
</html>

Create a vite.config.ts, adding the plugin:

// vite.config.ts
import { defineConfig } from "vite";
import webExtension from "vite-plugin-web-extension";

export default defineConfig({
  plugins: [webExtension()],
});

// vite.config.ts
import { defineConfig } from "vite";
import webExtension from "vite-plugin-web-extension";

export default defineConfig({
  plugins: [webExtension()],
});

That's it! You're ready to go. Run pnpm dev to open a browser and install the extension in development mode, or pnpm build to bundle your extension for production.

Getting Started ​

Introduction ​

Create a New Project ​

Setting Up a Project Manually ​

Getting Started

Introduction

Create a New Project

Setting Up a Project Manually