Skip to content

neo-hack/webext-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

7904957 Β· Feb 2, 2022

History

22 Commits
Feb 2, 2022
Sep 25, 2021
Sep 23, 2021
Feb 2, 2022
Sep 25, 2021
Feb 2, 2022
Feb 2, 2022
Sep 24, 2021
Sep 23, 2021
Sep 25, 2021
Feb 2, 2022
Sep 25, 2021
Feb 2, 2022
Feb 2, 2022
Sep 25, 2021
Sep 22, 2021
Sep 23, 2021
Sep 25, 2021
Sep 25, 2021
Sep 23, 2021

Repository files navigation

@aiou/webext-template

a fork version of vitesse-webext, but with react

A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.

npm GitHub stackblitz

Edit on StackBlitz ⚑️

Features

  • ⚑️ Instant HMR - use Vite on dev (no more refresh!)
  • 🌐 React
  • πŸ’¬ Effortless communications - powered by webext-bridge
  • πŸƒ Windi CSS - on-demand CSS utilities
  • 🦾 TypeScript - type safe
  • πŸ–₯ Content Script - Use React even in content script
  • 🌍 WebExtension - isomorphic extension for Chrome, Firefox, and others
  • πŸ“ƒ Dynamic manifest.json with full type support

Pre-packed

WebExtension Libraries

UI Frameworks

  • Windi CSS - next generation utility-first CSS framework

βš—οΈ experimental

Combine Windi CSS and styled-components by styled-plugin-windicss, it will translate

// input
const Wrapped = styled.div`
  @apply m-0 p-0 w-100vw h-100vh overflow-hidden;
`
// output
const Wrapped = styled.div`
  color: red;
  margin: 0px;
  overflow: hidden;
  padding: 0px;
  width: 100vw;
`

Dev tools

  • TypeScript
  • pnpm - fast, disk space efficient package manager
  • esno - TypeScript / ESNext node runtime powered by esbuild
  • npm-run-all - Run multiple npm-scripts in parallel or sequential
  • web-ext - Streamlined experience for developing web extensions

Usage

Folders

  • src - main source.
    • contentScript - scripts and components to be injected as content_script
    • background - scripts for background.
    • components - auto-imported React components that shared in popup and options page.
    • styles - styles shared in popup and options page
    • manifest.ts - manifest for the extension.
  • extension - extension package root.
    • assets - static assets.
    • dist - built files, also serve stub entry for Vite on development.
  • scripts - development and bundling helper scripts.

Development

pnpm dev

Then load extension in browser with the extension/ folder.

For Firefox developers, you can run the following command instead:

pnpm start:firefox

web-ext auto reload the extension when extension/ files changed.

While Vite handles HMR automatically in the most of the case, Extensions Reloader is still recommanded for cleaner hard reloading.

Build

To build the extension, run

pnpm build

And then pack files under extension, you can upload extension.crx or extension.xpi to appropriate extension store.

built with ❀️ by 😼