Convert Figma logo to code with AI

Jonghakseo logochrome-extension-boilerplate-react-vite

Chrome Extension Boilerplate with React + Vite + Typescript

2,166
314
2,166
28
View on GitHub

Top Related Projects

lxieyang's avatar

chrome-extension-boilerplate-react

3,466

A Chrome Extensions boilerplate using React 18 and Webpack 5.

abhijithvijayan's avatar

web-extension-starter

2,000

🖥🔋Web Extension starter to build "Write Once Run on Any Browser" extension

dutiyesh's avatar

chrome-extension-cli

2,340

🚀 The CLI for your next Chrome Extension

Quick Overview

This project is a boilerplate for creating Chrome extensions using React and Vite. It provides a modern, efficient development environment with hot module replacement (HMR) and TypeScript support, making it easier to build and maintain complex Chrome extensions.

Pros

  • Fast development with Vite and HMR support
  • TypeScript integration for improved code quality and maintainability
  • Pre-configured with React for building user interfaces
  • Includes example implementations for various Chrome extension components (popup, options, content script, etc.)

Cons

  • May have a steeper learning curve for developers new to React or TypeScript
  • Requires familiarity with modern JavaScript tooling and build processes
  • Limited documentation compared to some other boilerplates
  • Might be overkill for simple extensions that don't require a full React setup

Getting Started

  1. Clone the repository:

    git clone https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite.git

  2. Install dependencies:

    cd chrome-extension-boilerplate-react-vite
npm install

  3. Start the development server:

    npm run dev

  4. Build the extension for production:

    npm run build

  5. Load the extension in Chrome:

    • Open Chrome and navigate to chrome://extensions
    • Enable "Developer mode"
    • Click "Load unpacked" and select the dist folder in your project directory

Competitor Comparisons

lxieyang logo

chrome-extension-boilerplate-react

3,466

A Chrome Extensions boilerplate using React 18 and Webpack 5.

Pros of chrome-extension-boilerplate-react

  • Uses Create React App, providing a familiar and well-documented setup for React developers
  • Includes a comprehensive README with detailed instructions and explanations
  • Supports both Chrome and Firefox browsers out of the box

Cons of chrome-extension-boilerplate-react

  • Uses older technology stack (Webpack, older React version)
  • Less active maintenance and updates compared to the Vite-based alternative
  • Lacks some modern development features like hot module replacement (HMR)

Code Comparison

chrome-extension-boilerplate-react:

{
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  }
}

chrome-extension-boilerplate-react-vite:

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

The code comparison shows the difference in build tools and scripts. The Vite-based boilerplate uses more modern and faster build processes, while the Create React App-based boilerplate uses traditional Node.js scripts.

chrome-extension-boilerplate-react-vite offers a more up-to-date tech stack with Vite, TypeScript, and newer React features. It provides faster development experience with HMR and improved build times. However, chrome-extension-boilerplate-react may be more suitable for developers familiar with Create React App and those targeting multiple browsers from the start.

abhijithvijayan logo

web-extension-starter

2,000

🖥🔋Web Extension starter to build "Write Once Run on Any Browser" extension

Pros of web-extension-starter

  • Supports multiple browsers (Chrome, Firefox, Opera) out of the box
  • Includes a robust configuration setup with webpack
  • Provides a well-structured project layout with separate directories for background, content, and popup scripts

Cons of web-extension-starter

  • Uses older technology stack (webpack, babel) compared to the more modern Vite setup
  • Less active maintenance and fewer recent updates
  • Lacks some advanced features like HMR (Hot Module Replacement) for development

Code Comparison

web-extension-starter (webpack.config.js):

module.exports = {
  entry: {
    background: path.join(__dirname, 'source', 'Background', 'index.ts'),
    contentScript: path.join(__dirname, 'source', 'ContentScript', 'index.ts'),
    popup: path.join(__dirname, 'source', 'Popup', 'index.tsx'),
  },
  // ... more configuration
};

chrome-extension-boilerplate-react-vite (vite.config.ts):

export default defineConfig({
  plugins: [react(), svgr(), viteStaticCopy(copyPluginOptions)],
  build: {
    rollupOptions: {
      input: {
        background: resolve(__dirname, 'src/pages/background/index.ts'),
        contentStyle: resolve(__dirname, 'src/pages/content/style.scss'),
        contentScript: resolve(__dirname, 'src/pages/content/index.ts'),
        // ... more entries
      },
    },
  },
});

The code comparison shows the different build tool configurations, highlighting the more modern approach used in chrome-extension-boilerplate-react-vite with Vite.

dutiyesh logo

chrome-extension-cli

2,340

🚀 The CLI for your next Chrome Extension

Pros of chrome-extension-cli

  • Simpler setup and configuration, making it easier for beginners to get started
  • Supports multiple JavaScript frameworks (React, Vue, Svelte) and vanilla JavaScript
  • Includes a command-line interface for easy project scaffolding and management

Cons of chrome-extension-cli

  • Less opinionated structure, which may require more manual setup for complex projects
  • Doesn't include built-in support for TypeScript or advanced bundling options
  • Limited pre-configured development tools compared to chrome-extension-boilerplate-react-vite

Code Comparison

chrome-extension-cli (package.json):

{
  "scripts": {
    "start": "web-ext run",
    "build": "web-ext build"
  }
}

chrome-extension-boilerplate-react-vite (package.json):

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

The code comparison shows that chrome-extension-cli uses web-ext for development and building, while chrome-extension-boilerplate-react-vite utilizes Vite and TypeScript for a more advanced development setup.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Logo

GitHub action badge GitHub action badge

hits

This boilerplate has Legacy version

[!NOTE] This project is listed in the Awesome Vite

[!TIP] Share storage state between all pages

https://github.com/user-attachments/assets/3b8e189f-6443-490e-a455-4f9570267f8c

Table of Contents

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(Rollup) & Turborepo.

Features

Getting started:

  1. Clone this repository.
  2. Change extensionDescription and extensionName in messages.json file.
  3. Install pnpm globally: npm install -g pnpm (check your node version >= 18.19.1)
  4. Run pnpm install

And then, depending on needs:

For Chrome:

  1. Run:
    • Dev: pnpm dev (On windows, you should run as administrator. (Issue#456)
    • Prod: pnpm build
  2. Open in browser - chrome://extensions
  3. Check - Developer mode
  4. Find and Click - Load unpacked extension
  5. Select - dist folder at root

For Firefox:

  1. Run:
    • Dev: pnpm dev:firefox
    • Prod: pnpm 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 at root

Remember in firefox you add plugin in temporary mode, that's mean it'll disappear after each browser close.

You have to do it on every browser launch.

Install dependency for turborepo:

For root:

  1. Run pnpm i <package> -w

For module:

  1. Run pnpm i <package> -F <module name>

package - Name of the package you want to install e.g. nodemon
module-name - You can find it inside each package.json under the key name, e.g. @extension/content-script, you can use only content-script without @extension/ prefix

Env Variables

  1. Copy .example.env and past it as .env in the same path
  2. Add a new record inside .env
  3. Add this key with type for value to vite-env.d.ts (root) to ImportMetaEnv
  4. Then you can use it with import.meta.env.{YOUR_KEY} like with standard Vite Env

If you want to set it for each package independently:

  1. Create .env inside that package
  2. Open related vite.config.mts and add envDir: '.' at the end of this config
  3. Rest steps like above

Remember you can't use global and local at the same time for the same package(It will be overwritten)

Structure

ChromeExtension

Main app with background script, manifest

  • manifest.js - manifest for chrome extension
  • lib/background - background script for chrome extension (background.service_worker in manifest.json)
  • public/content.css - content css for user's page injection

Packages

Some shared packages

  • dev-utils - utils for chrome extension development (manifest-parser, logger)
  • i18n - custom i18n package for chrome extension. provide i18n function with type safety and other validation.
  • hmr - custom HMR plugin for vite, injection script for reload/refresh, hmr dev-server
  • shared - shared code for entire project. (types, constants, custom hooks, components, etc.)
  • storage - helpers for storage easier integration with, e.g local, session storages
  • tailwind-config - shared tailwind config for entire project
  • tsconfig - shared tsconfig for entire project
  • ui - here's a function to merge your tailwind config with global one, and you can save components here
  • vite-config - shared vite config for entire project
  • zipper - By pnpm zip you can pack dist folder into extension.zip inside newly created dist-zip
  • e2e - By pnpm e2e you can run end to end tests of your zipped extension on different browsers

Pages

  • content - content script for chrome extension (content_scripts in manifest.json)
  • content-ui - content script for render UI in user's page (content_scripts in manifest.json)
  • content-runtime - content runtime script this can be inject from popup like standard content
  • devtools - devtools for chrome extension (devtools_page in manifest.json)
  • devtools-panel - devtools panel for devtools
  • new-tab - new tab for chrome extension (chrome_url_overrides.newtab in manifest.json)
  • options - options for chrome extension (options_page in manifest.json)
  • popup - popup for chrome extension (action.default_popup in manifest.json)
  • side-panel - sidepanel(Chrome 114+) for chrome extension (side_panel.default_path in manifest.json)

Community

To chat with other community members, you can join the Discord server. You can ask questions on that server, and you can also help others.

Also, suggest new features or share any challenges you've faced while developing Chrome extensions!

Reference

Star History

Star History Chart

Contributors

This Boilerplate is made possible thanks to all of its contributors.

All Contributors

Special Thanks To

JetBrains Logo (Main) logo.Jackson Hong

Made by Jonghakseo