web-extension-starter - GitLite

KO | EN

gitlite — search

#javascript #python #react #typescript #golang #android #linux #macos #java #kubernetes #vue #ios #mcp #open-source

web-extension-starter

(★ 2,182)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- - build.yml
- FUNDING.yml
- FIREFOX_MV2.md
- - index.ts
- - index.ts
- - index.tsx
  - options.html
  - Options.module.scss
  - Options.tsx
- - index.tsx
  - popup.html
  - Popup.module.scss
  - Popup.tsx
- - _fonts.scss
  - _reset.scss
  - _variables.scss
- - messages.ts
  - storage.ts
- - storage.ts
- globals.d.ts
- manifest.json
.editorconfig
.gitignore
.nvmrc
CODE_OF_CONDUCT.md
eslint.config.mjs
LICENCE
package-lock.json
package.json
postcss.config.js
README.md
tsconfig.json
vite.config.ts

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/abhijithvijayan/web-extension-starter

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd web-extension-starter

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm run dev:chrome # For Chrome

개발/실행 서버를 켭니다.

npm run dev:firefox # For Firefox

개발/실행 서버를 켭니다.

npm run build:chrome # Build Chrome extension

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

npm run build:firefox # Build Firefox addon

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">🚀 web-extension-starter</h1>
<p align="center">Web Extension starter to build "Write Once Run on Any Browser" extension</p>
<div align="center">
  <a href="https://github.com/abhijithvijayan/web-extension-starter/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/abhijithvijayan/web-extension-starter.svg" alt="LICENSE" />
  </a>
  <a href="https://twitter.com/intent/tweet?text=Check%20out%20web-extension-starter%21%20by%20%40_abhijithv%0A%0AWeb%20Extension%20starter%20to%20build%20%22Write%20Once%20Run%20on%20Any%20Browser%22%20extension.%20https%3A%2F%2Fgithub.com%2Fabhijithvijayan%2Fweb-extension-starter%0A%0A%23javascript%20%23react%20%23typescript%20%23sass%20%23webextension%20%23chrome%20%23firefox%20%23opera">
     <img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="TWEET" />
  </a>
</div>
<h3 align="center">🙋‍♂️ Made by <a href="https://twitter.com/_abhijithv">@abhijithvijayan</a></h3>
<p align="center">
  Donate:
  <a href="https://www.paypal.me/iamabhijithvijayan" target='_blank'><i><b>PayPal</b></i></a>,
  <a href="https://www.patreon.com/abhijithvijayan" target='_blank'><i><b>Patreon</b></i></a>
</p>
<p align="center">
  <a href='https://www.buymeacoffee.com/abhijithvijayan' target='_blank'>
    <img height='36' style='border:0px;height:36px;' src='https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/custom_images/orange_img.png' border='0' alt='Buy Me a Coffee' />
  </a>
</p>
<hr />

❤️ it? ⭐️ it on [GitHub](https://github.com/abhijithvijayan/web-extension-starter) or [Tweet](https://twitter.com/intent/tweet?text=Check%20out%20web-extension-starter%21%20by%20%40_abhijithv%0A%0AWeb%20Extension%20starter%20to%20build%20%22Write%20Once%20Run%20on%20Any%20Browser%22%20extension.%20https%3A%2F%2Fgithub.com%2Fabhijithvijayan%2Fweb-extension-starter%0A%0A%23javascript%20%23react%20%23typescript%20%23sass%20%23webextension%20%23chrome%20%23firefox%20%23opera) about it.

## Features

- Cross Browser Support (Web-Extensions API)
- Browser Tailored Manifest generation
- Vite for fast builds and HMR
- Automatic build on code changes
- Auto packs browser specific build files
- SASS/SCSS styling with CSS Modules
- TypeScript by default
- ES6 modules support
- React 19 with automatic JSX runtime
- ESLint 9 flat config with Prettier

## Tech Stack

- **Bundler**: [Vite](https://vitejs.dev/) 7
- **UI**: [React](https://react.dev/) 19
- **Language**: [TypeScript](https://www.typescriptlang.org/) 5.9
- **Styling**: SCSS with CSS Modules
- **Linting**: ESLint 9 (flat config) + Prettier
- **Manifest**: [vite-plugin-wext-manifest](https://github.com/abhijithvijayan/vite-plugin-wext-manifest)

## Browser Support

This starter uses **Manifest V3** for all browsers.

| [![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](https://raw.githubusercontent.com/abhijithvijayan/web-extension-starter/main/) | [![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](https://raw.githubusercontent.com/abhijithvijayan/web-extension-starter/main/) | [![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png)](https://raw.githubusercontent.com/abhijithvijayan/web-extension-starter/main/) | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](https://raw.githubusercontent.com/abhijithvijayan/web-extension-starter/main/) | [![Brave](https://raw.githubusercontent.com/alrra/browser-logos/master/src/brave/brave_48x48.png)](https://raw.githubusercontent.com/abhijithvijayan/web-extension-starter/main/) |
| --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| 88+ (Jan 2021)                                                                                | 112+ (Apr 2023)                                                                                  | 74+ (Chromium-based)                                                                       | 88+ (Chromium-based)                                                                    | Latest (Chromium-based)                                                                    |

> **Note**: Firefox 112+ is required for Manifest V3 support with ES modules in background scripts.
>
> Need to support older Firefox versions? See [Firefox MV2 Guide](docs/FIREFOX_MV2.md) for using Manifest V2 with Firefox.

## Used by extensions in production that has over 100,000+ users.

- [daily.dev](https://daily.dev) - [daily.dev extension](https://r.daily.dev/get)
- [Jiffy Reader](https://chrome.google.com/webstore/detail/jiffy-reader/lljedihjnnjjefafchaljkhbpfhfkdic)
- [kutt-extension](https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd)
- [doubanIMDb](https://chrome.google.com/webstore/detail/doubanimdb/nfibbjnhkbjlgjaojglmmibdjicidini)

## Use this template

Create a new directory and run

```
curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-typescript-vite.tar.gz | tar -xz --strip-components=1
```

## 🚀 Quick Start

Ensure you have [Node.js](https://nodejs.org) 20 or later installed.

Then run the following:

```bash
# Install dependencies
npm install

# Start development server
npm run dev:chrome    # For Chrome
npm run dev:firefox   # For Firefox

# Build for production
npm run build:chrome  # Build Chrome extension
npm run build:firefox # Build Firefox addon
npm run build         # Build for all browsers
```

## Project Structure

```
source/
├── Background/        # Service worker (Chrome MV3) / Background script (Firefox)
├── ContentScript/     # Content scripts (injected into web pages)
├── Popup/             # Extension popup UI
├── Options/           # Options page UI
├── components/        # Shared React components
├── styles/            # Global styles and variables
├── types/             # TypeScript type definitions
├── utils/             # Utility functions
├── public/            # Static assets (icons, etc.)
└── manifest.json      # Extension manifest template
```

## Development

### Loading the Extension

#### Chrome

1. Navigate to `chrome://extensions`
2. Enable "Developer mode"
3. Click "Load unpacked"
4. Select `extension/chrome` directory

#### Firefox

1. Navigate to `about:debugging`
2. Click "This Firefox"
3. Click "Load Temporary Add-on"
4. Select `extension/firefox/manifest.json`

### Content Scripts

Content scripts are automatically bundled as IIFE (Immediately Invoked Function Expression) to ensure compatibility with the browser's content script execution environment, which doesn't support ES modules.

### Browser-Specific Manifest

The manifest uses vendor prefixes to generate browser-specific configurations:

```json
{
  "__chrome__name": "My Chrome Extension",
  "__firefox__name": "My Firefox Addon",
  "__chrome|firefox__description": "Works on both!"
}
```

See [vite-plugin-wext-manifest](https://github.com/abhijithvijayan/vite-plugin-wext-manifest) for more details.

## Scripts

| Script              | Description                              |
| ------------------- | ---------------------------------------- |
| `npm run dev:chrome`  | Start dev server for Chrome            |
| `npm run dev:firefox` | Start dev server for Firefox           |
| `npm run build:chrome`| Build production Chrome extension      |
| `npm run build:firefox`| Build production Firefox addon        |
| `npm run build`       | Build for all browsers                 |
| `npm run lint`        | Run ESLint                             |
| `npm run lint:fix`    | Run ESLint with auto-fix               |

## Linting & TypeScript Config

- Shared ESLint & Prettier Configuration - [`@abhijithvijayan/eslint-config`](https://www.npmjs.com/package/@abhijithvijayan/eslint-config)
- Shared TypeScript Configuration - [`@abhijithvijayan/tsconfig`](https://www.npmjs.com/package/@abhijithvijayan/tsconfig)

## Bugs

Please file an issue [here](https://github.com/abhijithvijayan/web-extension-starter/issues/new) for bugs, missing documentation, or unexpected behavior.

## License

MIT © [Abhijith Vijayan](https://abhijithvijayan.in)