a fork version of vitesse-webext, but with react

Related tags

React react extension vite
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
GitHub
An in-development version of the new CTFGuide. Built with React.js.

In the project directory, you can run: npm start Runs the app in the development mode. Open http://localhost:3000 to view it in your browser. The page

CTFGuide 16 Dec 20, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
Word guessing game like Wordle but to compete with your friends

Battle your friends in a word guessing game WarWordly is an Open Source and Free to Play multiplayer game inspired in the famous Wordle. The idea is t

Nico Andrade 28 Dec 7, 2022
Mirrors the functionality of Apollo client's useQuery hook, but with a "query" being any async function rather than GQL statement.

useAsyncQuery Mirrors the functionality of Apollo client's useQuery hook, but with a "query" being any async function rather than GQL statement. Usage

Alasdair McLeay 7 Nov 16, 2022
🖱or ⌨️? 🤷‍♀️, but hopefully use-hover-state works on the "user intent" not the "device"

useHoverState() The one aware of keyboard navigation as well ?? npm i use-hover-state A React hook for tracking user interaction with the DOM elements

Marina 10 Aug 11, 2022
Fetching data from REST COUNTRIES API, this app (mobile version for now) gives information like area, population, capital, and borders for 195 countries from seven continents.

Space Travellers' Hub World Countries App works with an API which returns informations about 195 countries. Fetching data from REST COUNTRIES API, thi

Nicolae Pop 7 Aug 8, 2022
The Bookstore is a website similar to the "Awesome Books" website built in the previous module. You will create an MVP version of it that allows you to: Display a list of books. Add a book. Remove a selected book.

Bookstore The Bookstore is a website similar to the "Awesome Books" website built in the previous module. You will create an MVP version of it that al

Anuar Shaidenov 6 Jun 12, 2022
automate your workspace version & publish by using conventional-changelog-commits

Lerna-Lite ?? Lerna-Lite is a super light version of the original Lerna About Lerna-Lite Why create this lib/fork? See it in Action README Badge Insta

Ghislain B. 307 Dec 24, 2022
automate your workspace version & publish by using conventional-changelog-commits

Lerna-Lite ?? Lerna-Lite is a super light version of the original Lerna About Lerna-Lite Why create this lib/fork? See it in Action README Badge Insta

Ghislain B. 129 May 8, 2022
The Bookstore is a website similar to the "Awesome Books" website. Here we will create an MVP version of it that allows you to: Display a list of books, Add a book and Remove a selected book.

Book Store This is Book Store project. Built With HTML CSS JavaScript React Screenshot Live Demo Go Live ?? Getting Started Open dev branch Open VSCod

Tadesse Alemayehu 5 May 3, 2022
a babel plugin that can transform generator function to state machine, which is a ported version of typescript generator transform

Babel Plugin Lite Regenerator intro This babel plugin is a ported version of TypeScript generator transform. It can transform async and generator func

Shi Meng 6 Jul 8, 2022
A lite version for the my original app loki stream which allowed watching anime on your phone. Made using expo.

LokiStream Lite A lite version for the my original app loki stream. This app is faster, smaller and more optimized for your phone. It allows you to wa

Lavish Kumar 18 Dec 24, 2022
Open source version of the GitHub /trending page

ghtrending ⭐ Open source version of GitHub's trending page Find the latest trending repositories on GitHub! ghtrending.io link ?? Please note, this pr

Grant Birkinbine 10 Nov 22, 2022
A new renovated version of Directory to search @expo-google-fonts

Directory | AtilaDev Directory is an easy & quick search to find google fonts using @expo-google-fonts for your React Native App. Usage Press / key to

Leandro Favre 2 Oct 5, 2022
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — "isomorphic" web app boilerplate React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Expr

Kriasoft 21.7k Dec 30, 2022
📋 React Hooks for forms validation (Web + React Native)

English | 繁中 | 简中 | 日本語 | 한국어 | Français | Italiano | Português | Español | Русский | Deutsch | Türkçe Features Built with performance and DX in mind

React Hook Form 32.4k Dec 29, 2022
:black_medium_small_square:React Move | Beautiful, data-driven animations for React

React-Move Beautiful, data-driven animations for React. Just 3.5kb (gzipped)! Documentation and Examples Features Animate HTML, SVG & React-Native Fin

Steve Hall 6.5k Jan 1, 2023
React features to enhance using Rollbar.js in React Applications

Rollbar React SDK React features to enhance using Rollbar.js in React Applications. This SDK provides a wrapper around the base Rollbar.js SDK in orde

Rollbar 39 Jan 3, 2023
🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

toastify-react-native ?? toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! De

Zahid Ali 29 Oct 11, 2022