![logo](https://raw.githubusercontent.com/eviltomato/vite-web-extension/main/public/icon-128.png)
This is a side product of my Chrome Extension Supatabs. Supatabs is a 🔥🔥 BLAZINGLY FAST 🔥🔥 free alternative to OneTab with support for chrome tab groups and searching through tabs.
If you tend to have thousands of tabs open, are a OneTab user, or use any other tab manager make sure to check it out here!
This boilerplate is meant to be a quick start for creating chrome extensions using React, Typescript and Tailwind CSS.
Built for:
For improved DX and rapid building vite and nodemon are used.
Chrome does not accept manifest v2 extensions since Jan 2022, therefore this template uses manifest v3.
Firefox + other browsers don't yet support manifest v3, so cross browser usage is not encouraged.
As soon as Firefox supports manifest v3, support will be added in this repo as well.
Oh by the way ... I also implemented a chrome local/sync storage hook for react, which works well with this template. Check it out here.
I have used webpack react boilerplates and found it too hard to configure.
Vite is actually mega easy to understand, which makes it easier to get into and to maintain for others.
I couldn't find a boilerplate for React, TypeScript and Tailwind CSS. So here it is.
- Clone this repository.
- Change
name
anddescription
in package.json => Auto synchronize with manifest - Run
yarn
ornpm i
(check your node version >= 16) - Run
yarn dev
ornpm run dev
- Load Extension on Chrome
- Open - Chrome browser
- Access - chrome://extensions
- Check - Developer mode
- Find - Load unpacked extension
- Select -
dist
folder in this project (after dev or build)
- If you want to build in production, Just run
yarn build
ornpm run build
.
As the template has all of the potential Chrome extension pages implemented, you likely have to customize it to fit your needs.
E.g. you don't want the newtab page to activate whenever you open a new tab:
- remove the directory
newtab
and its contents insrc/pages
- remove the
newtab
rollup input in thevite.config.ts
//...
build: {
outDir,
rollupOptions: {
input: {
devtools: resolve(pagesDir, 'devtools', 'index.html'),
panel: resolve(pagesDir, 'panel', 'index.html'),
content: resolve(pagesDir, 'content', 'index.ts'),
background: resolve(pagesDir, 'background', 'index.ts'),
popup: resolve(pagesDir, 'popup', 'index.html'),
newtab: resolve(pagesDir, 'newtab', 'index.html'), // <--- REMOVE THIS LINE
options: resolve(pagesDir, 'options', 'index.html'),
},
output: {
entryFileNames: (chunk) => `src/pages/${chunk.name}/index.js`,
},
},
},
/...
CSS files in the src/pages/*
directories are not necessary. They are left in there in case you want
to use it in combination with Tailwind CSS. Feel free to delete them.
Tailwind can be configured as usual in the tailwind.config.cjs
file. See doc link below.
Heavily inspired by Jonghakseo's vite chrome extension boilerplate. It uses SASS instead of TailwindCSS if you want to check it out.
Feel free to open PRs or raise issues!