a fork version of vitesse-webext, but with react

Overview

@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

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 😼

Comments
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

    Releases

    @aiou/[email protected]

    Patch Changes

    • 26afae9: fix hmr in option pages
    opened by github-actions[bot] 0
  • HMR does not work in option page

    HMR does not work in option page

    I tried to run pnpm dev and access the option page, the following message displayed and HMR does not worked.

    Vite server did not start

    So I edited the /src/options/index.html as follows, and it worked well.

     <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <title>Options</title>
     </head>
     <body>
    -  <div id="app"></div>
    +  <div id="root"></div>
       <!-- hmr -->
       <script type="module" src="./main.tsx"></script>
     </body>
     </html>
    

    Is it possible to fix this?

    opened by tackme31 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

    Releases

    @aiou/[email protected]

    Patch Changes

    • 64854a8: fill up pkg info
    opened by github-actions[bot] 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

    Releases

    @aiou/[email protected]

    Patch Changes

    • 6b37ec4: uninstall cz-emoji
    opened by github-actions[bot] 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

    Releases

    @aiou/[email protected]

    Minor Changes

    • 4b30d18: meet vite + react + webext
    opened by github-actions[bot] 0
Releases(v0.1.2)
Owner
ruaaa
Some useful tools make project become better
ruaaa
HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API.

React Document Meta HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API. Built wi

kodyl 320 Nov 18, 2022
Like useRef, but with lifecycle and ref merging support

useLifecycleRef Like useRef, but with lifecycle and ref merging support Quick Look Here is a simplfied demonstration on how easy to use useLifecycleRe

Billy Kwok 1 Jun 10, 2022
React-three-ts-bp - [TS] Stable version for React-Three + Spring & Tailwind bp

React-three-ts-bp - [TS] Stable version for React-Three + Spring & Tailwind bp

Dale B. 2 Jan 3, 2022
Write your own version of React. Why? Because you CAN!

Write your own version of React. Why? Because you CAN!

vutr 25 Oct 8, 2022
Entire React code base explanation by visual block schemes (Stack version)

Under the hood: React This repository contains an explanation of inner work of React. In fact, I was debugging through the entire code base and put al

Bohdan Liashenko 5.4k Dec 29, 2022
React version of dbt labs dbt docs app

React-dbt-docs React based DBT Docs site. Why though? One of the awesome features of DBT is the documentation site it is able to generate for your pro

null 14 Dec 12, 2022
Standalone version of the AutoSizer component from react-virtualized

react-virtualized-auto-sizer Standalone version of the AutoSizer component from react-virtualized Install npm install --save react-virtualized-auto-si

Brian Vaughn 435 Dec 12, 2022
semantic-release automates the whole package release workflow including: determining the next version number, generating the release notes, and publishing the package.

?? ?? semantic-release Fully automated version management and package publishing semantic-release automates the whole package release workflow includi

null 17k Jan 4, 2023
A mini version of Vue 3 with reactivity, runtime, and compiler modules

A mini version of Vue 3 with reactivity, runtime, and compiler modules

Boquan (Brian) Yin 29 Jun 16, 2022
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Salvatore Ravidà 177 Oct 10, 2022
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

Kévin Dunglas 632 Dec 29, 2022
30 Days of React challenge is a step by step guide to learn React in 30 days

30 Days of React challenge is a step by step guide to learn React in 30 days. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take up to 100 days, follow your own pace.

Asabeneh 18.4k Jan 5, 2023
React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content.

MohammadAli Karimi 11 Nov 27, 2022
React People lists and connects React developers around the world.

React People React People lists and connects React developers around the world. Progress View the Project page for details on what's planned and what'

Vitor Leonel 15 Aug 23, 2022
React Backbone Binding that works with React 16

WithBackbone React Higher Order Component which will bind Backbone Data that works with React Fiber (v.16) Why did we make it There are already a coup

Beanworks 2 Mar 19, 2021
A description of React's new core algorithm, React Fiber

React Fiber Architecture Introduction React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of

Andrew Clark 9.8k Jan 5, 2023
React Clone - How React Works: An In-Depth Guide

Как работает React: подробное руководство Привет, друзья! В этой статье я покажу вам, с чего начинается React. Что это означает? Это означает, что мы

Igor Agapov 5 Nov 25, 2021
A drum machine built with React using the Create React App toolchain.

drum-machine A simple drum machine built with React using the Create React App toolchain. Getting Started Clone or download the repository. Open a com

Ryan Schafer 1 Dec 30, 2021
React-Login-app - Create a Login and Registration Page with React Router

About In this repo I was given a Task to create a Login and Registration page wh

Devanshu Desai 3 Dec 10, 2022