Developing Chrome Extensions with React + Vite + TypeScript

TL;DR

I created a template for building Chrome extensions with React + Vite + TypeScript.

There is also the option of using CRXJS vite plugins, but it only supports Vite up to version 3 and is no longer actively maintained. So the dependencies are basically just React, Vite, and TypeScript.

Features and Usage of the Template

1. Unified Build for background, content-scripts, and popup

React is used for the UI components. These are managed under the popup directory.

Content Scripts for DOM manipulation are managed under content-script, and code that uses Service Workers is managed under background.

All of these are built together into the dist directory with pnpm build, and can be used immediately by uploading them in Chrome's developer mode.

2. Formatter and Linter Setup

The following tools are used:

• biome for TypeScript formatting and linting
• dprint for formatting and linting configuration files (markdown, json, yaml, toml)
• sort-package-json for sorting package.json field order

These can be used via commands like pnpm fmt and pnpm lint.

3. Basic GitHub Actions Configuration

CI is set up to run:

• actionlint for linting GitHub Actions
• biome, dprint, and sort-package-json for linting the source code

Internals

Structure

The project has the following structure. Basically, background, content-scripts, and popup are implemented in separate directories, and the build process places everything under dist.

./
├── background/
│  └── background.ts
├── biome.json
├── content-scripts/
│  ├── content-scripts.ts
│  └── main.ts
├── dprint.json
├── LICENSE
├── package.json
├── pnpm-lock.yaml
├── popup/
│  ├── index.html
│  └── src/
│     ├── App.css
│     ├── App.tsx
│     ├── assets/
│     │  └── react.svg
│     ├── index.css
│     ├── main.tsx
│     └── vite-env.d.ts
├── public/
│  ├── manifest.json
│  └── vite.svg
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vite-background.config.ts
├── vite-content.config.ts
└── vite.config.ts

manifests.json

We use version 3. Also, since React is used, it's managed as public/manifest.json.

{
  "name": "cext",
  "version": "1.0.0",
  "manifest_version": 3,
  "description": "A simple extension",
  "action": {
    "default_popup": "popup/index.html"
  },
  "permissions": ["scripting", "activeTab"]
}

Configuration Files

vite.config.ts contains the Popup configuration. React is only used here.

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        popup: "./popup/index.html",
      },
      output: {
        entryFileNames: "assets/[name].js",
      },
    },
  },
});

vite-background.config.ts and vite-content-scripts.config.ts are nearly identical -- they just configure the output to the dist directory.

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    emptyOutDir: false,
    target: "node16",
    rollupOptions: {
      input: {
        background: "./background/background.ts",
      },
      output: {
        entryFileNames: "assets/[name].js",
      },
    },
  },
});

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    emptyOutDir: false,
    rollupOptions: {
      input: {
        content: "./content-scripts/content-scripts.ts",
        "content-main": "./content-scripts/main.ts",
      },
      output: {
        entryFileNames: "assets/[name].js",
      },
    },
  },
});