Chrome Extension Boilerplate with
React + Vite + TypeScript

This project is listed in the Awesome Vite

Table of Contents

• Intro
• Features
• Installation
  • Procedures
    • Chrome
    • Firefox
• Add Style Library
  • Chakra UI
• Pages
• Screenshots
  • NewTab
  • Popup
  • Devtools
• Examples
• Documents

Intro

This boilerplate is made for creating chrome extensions using React and Typescript.

The focus was on improving the build speed and development experience with Vite.

Features

• React 18
• TypeScript
• Jest
• React Testing Library
• Vite
• SASS
• Prettier
• ESLint
• Husky
• Commitlint
• Conventional Commits
• Chrome Extension Manifest Version 3
• HRR(Hot Rebuild & Refresh/Reload)

Installation

Procedures:

1. Clone this repository.
2. Change name and description in package.json => Auto synchronize with manifest
3. Install pnpm globally: npm install -g pnpm (check your node version >= 16.6, recommended >= 18)
4. Run pnpm install

And next, depending on the needs:

For Chrome:

1. Run:
   • Dev: pnpm dev or npm run dev
   • Prod: pnpm build or npm run build
2. Open in browser - chrome://extensions
3. Check - Developer mode
4. Find and Click - Load unpacked extension
5. Select - dist folder

For Firefox:

1. Run:
   • Dev: pnpm dev:firefox or npm run dev:firefox
   • Prod: pnpm build:firefox or npm run build:firefox
2. Open in browser - about:debugging#/runtime/this-firefox
3. Find and Click - Load Temporary Add-on...
4. Select - manifest.json from dist folder

Remember in firefox you add plugin in temporary mode, that's mean it's disappear after close browser, you must do it again, on next launch.

Add Style Library

Chakra UI

1. Install the library:

$ pnpm install @chakra-ui/react @emotion/cache @emotion/react

2. You should add the code to vite.config.ts for Ignore unnecessary warnings

vite.config.ts

export default defineConfig({
  build: {
    rollupOptions: {
      // Add below code ~~~~~
      onwarn(warning, warn) {
        if (
          warning.code === "MODULE_LEVEL_DIRECTIVE" &&
          warning.message.includes(`"use client"`)
        ) {
          return;
        }
        warn(warning);
      },
      // Add above code ~~~~
    },
  },
});

3. You can use Chakra UI in your project:

src/pages/popup/Popup.tsx

import { Button } from "@chakra-ui/react";

export default function Popup() {
  return <Button colorScheme="teal">Button</Button>;
}

---

if you don't want to use Chakra UI in the content script, you can skip 4,5 step.

4. If you want to use Chakra UI in the content script, you need to add the following code:

src/pages/content/ui/CustomChakraProvider.tsx

import { ReactNode, useCallback, useEffect, useState } from "react";
import {
  ColorMode,
  ColorModeContext,
  ColorModeScript,
  CSSReset,
  extendTheme,
  GlobalStyle,
  ThemeProvider
} from "@chakra-ui/react";

const theme = extendTheme();

const getCurrentTheme = () => {
  const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
  return isDark ? "dark" : "light";
};

type CustomChakraProviderProps = {
  shadowRootId: string;
  children: ReactNode;
};
export default function CustomChakraProvider({ children, shadowRootId }: CustomChakraProviderProps) {
  const [colorMode, setColorMode] = useState<ColorMode>(getCurrentTheme());

  useEffect(() => {
    const darkThemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const onChangeColorSchema = (event: MediaQueryListEvent) => {
      const isDark = event.matches;
      setColorMode(isDark ? "dark" : "light");
    };

    darkThemeMediaQuery.addEventListener("change", onChangeColorSchema);

    return () => {
      darkThemeMediaQuery.removeEventListener("change", onChangeColorSchema);
    };
  }, []);

  const toggleColorMode = useCallback(() => {
    setColorMode(prev => (prev === "dark" ? "light" : "dark"));
  }, []);

  return (
    <ThemeProvider theme={theme} cssVarsRoot={`#${shadowRootId}`}>
      <ColorModeScript initialColorMode="system" />
      <ColorModeContext.Provider value={{ colorMode, setColorMode, toggleColorMode }}>
        <CSSReset />
        <GlobalStyle />
        {children}
      </ColorModeContext.Provider>
    </ThemeProvider>
  );
}

src/pages/content/ui/EmotionCacheProvider.tsx

import createCache from '@emotion/cache';
import { CacheProvider, type EmotionCache } from '@emotion/react';
import { ReactNode, useEffect, useState } from 'react';

export default function EmotionCacheProvider({ children, rootId }: { rootId: string; children: ReactNode }) {
  const [emotionCache, setEmotionCache] = useState<EmotionCache | null>(null);

  useEffect(() => {
    function setEmotionStyles(shadowRoot: ShadowRoot) {
      setEmotionCache(
        createCache({
          key: rootId,
          container: shadowRoot,
        }),
      );
    }

    const root = document.getElementById(rootId);
    if (root && root.shadowRoot) {
      setEmotionStyles(root.shadowRoot);
    }
  }, []);

  return emotionCache ? <CacheProvider value={emotionCache}>{children}</CacheProvider> : null;
}

5. Fix the src/pages/content/index.tsx file:

src/pages/content/index.tsx

import CustomChakraProvider from '@pages/content/ui/CustomChakraProvider';
import EmotionCacheProvider from '@pages/content/ui/EmotionCacheProvider';

// ...

createRoot(rootIntoShadow).render(
  // Add Providers
  <EmotionCacheProvider rootId={root.id}>
    <CustomChakraProvider shadowRootId={rootIntoShadow.id}>
      <App />
    </CustomChakraProvider>
  </EmotionCacheProvider>,
);

Pages

New Tab

Override Chrome pages
chrome_url_overrides.newtab in manifest.json

Popup

Browser actions
action.default_pupup in manifest.json

Devtools

Devtools
devtools_page in manifest.json

Background

Background
background.service_worker in manifest.json

ContentScript

Content Script
content_scripts[0] in manifest.json

Options

Options
options_page in manifest.json

SidePanel (Chrome 144+)

SidePanel
side_panel.default_path in manifest.json

Screenshots

New Tab

Popup

Black	White

Devtools

Examples

• https://github.com/Jonghakseo/drag-gpt-extension
• https://github.com/Jonghakseo/pr-commit-noti
• https://github.com/ariburaco/chatgpt-file-uploader-extended

Documents

• Vite Plugin
• ChromeExtension
• Rollup
• Rollup-plugin-chrome-extension

Star History

Contributors

JunyWuuuu91 💻	dim0147 🐛	jon lepage 🐛	LironH 🤔	Spencer Chang 🐛	deld123 🐛	Michal Hantl 🤔 🐛
Jordan Burgess 🤔	NAMEUN CHO 🐛	Andrew Mudrov 💬	Shubham Lad 🐛	hanrong 🐛	Florian König 💬	Tran Phong 🐛
tonychandesign 🐛	Ihor Makarchuk 🐛	hugoobauer 🐛	Karan Singh 🤔	remusris 🤔	hegel_dark 🤔	Jingsi 🐛 💻
Chris Ozgo 🐛	Cong 🐛	PatrykKuniczak 🤔 💻 📖	Hector Parra 🐛	JeongHyeon Kim 🚇	Terminels 💻	WonkyDD 💻 🐛
wangxy 🐛

---

Thanks To

Jetbrains	Jackson Hong

---

Jonghakseo