Loading repository data…
donething / repository
A simple chrome extension template with Vite, React, TypeScript and Tailwind CSS.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
注意：@crxjs/vite-plugin包要用最新的测试版^2.0.0+（如"^2.0.0-beta.23"），以支持MV3
最新版地址：crxjs/chrome-extension-tools
内容脚本中，向网页中注入组件和样式时使用shadow，避免影响原网页的样式
注意：导入样式时使用import styles from "./style.css?inline"。存储到变量styles，并且必须加上?inline（因为原文件并没有 export 内容）
然后注入组件时，styles也需要作为参数传递：
injectComponent(
<div className="absolute bottom-0 left-0 text-lg text-black bg-amber-400 z-50">
content script loaded
</div>,
styles
)
shadcn-ui库扩展(含内容脚本)可使用shadcn-ui
注意：内容脚本向网页注入组件时，中不能使用部分复杂的组件（如"Sonner"），要实际检测
因为不会将打包后js注入到网页的Shadow Dom中，会导致部分样式无效
所以，使用其它组件库（如"NextUI"）极可能都无法正常使用样式
This boilerplate is meant to be a minimal 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 mega easy to understand which makes it easier to get into and to maintain for others.
I couldn't find another minimal boilerplate for React, TypeScript and Tailwind CSS. So here it is.
name and description in manifest.jsonyarn or npm i (check your node version >= 16)yarn dev or npm run devdist folder in this project (after dev or build)yarn build or npm run build.The template includes all of the Chrome extension pages. You will 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:
newtab and its contents in src/pageschrome_url_overrides: { newtab: 'src/pages/newtab/index.html' }, in manifest.jsonIf you need to declare extra HTML pages beyond those the manifest accommodates, place them in the Vite config under build.rollupOptions.input.
This example includes a welcome page to open when the user installs the extension.
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.
To upload an extension to the Chrome store you have to pack (zip) it and then upload it to your item in entry in the Chrome Web Store.
This repo includes a Github Action Workflow to create a optimized prod build and create the zip file.
To run the workflow do the following:
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!
Selected from shared topics, language and repository description—not editorial ratings.
kstonekuan /
TypeScript library for Local LLM in Chromium browsers
83/100 healthJasonXian /
Boilerplate for building Chrome Extensions in React and TypeScript using a simple Webpack build process.
60/100 healthkelsonpw /
A dead simple routing solution for browser extensions written in typescript with React Hooks. Context free.
A simple React implementation of a Chrome Extension Template for a foldable side panel. With Parcel, TypeScript, TailwindCSS
50/100 healthdippas /
A forma mais simples e eficaz de remover o NONIO
62/100 healthmattburrell /
A simple Chrome Extension built using TypeScript, React and esbuild
43/100 health