Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mefengl/wxt-starter
Maybe the best template based on wxt.
https://github.com/mefengl/wxt-starter
chrome-extension firefox safari wxt
Last synced: 3 days ago
JSON representation
Maybe the best template based on wxt.
- Host: GitHub
- URL: https://github.com/mefengl/wxt-starter
- Owner: mefengl
- License: mit
- Created: 2023-12-06T14:56:33.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-27T07:16:48.000Z (about 1 month ago)
- Last Synced: 2025-01-16T14:26:16.339Z (10 days ago)
- Topics: chrome-extension, firefox, safari, wxt
- Language: TypeScript
- Homepage:
- Size: 1.23 MB
- Stars: 73
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WXT Starter
Build upon amazing [wxt](wxt.dev) framework.
## Requirements
- [bun](https://bun.sh/)
## Addons
- [tailwindcss](https://tailwindcss.com)
- [shadcn/ui](https://ui.shadcn.com)
- [@wxt-dev/i18n](https://wxt.dev/guide/i18n/introduction)
dev:
- [eslint-config](https://github.com/antfu/eslint-config): See [eslint](#eslint)
- [bumpp](https://github.com/antfu-collective/bumpp): use `bun bump`
optional:
- [trpc-chrome](https://github.com/jlalmes/trpc-chrome): See [trpc](#trpc)
## Setup
- [ ] update `name` in `package.json`, it will be zip file name
- [ ] update `title` and `description` in `src/locales`, these will appear in the Chrome Web Store
- [ ] update `default_locale` in `wxt.config.js` if not `en`
- [ ] replace `icon.png` in `src/assets`
- [ ] run `bun bump minor`
- [ ] [mvp](https://en.wikipedia.org/wiki/Minimum_viable_product)
- [ ] run `bun bump major`
- [ ] publish
optional:
- [ ] update `README.md`
- [ ] add extension url to `README.md`
- [ ] setup [cli submit](#cli-submit)
## Predefined Entrypoints
**Find more at [wxt.dev/examples](https://wxt.dev/examples.html)**
Move the predefined entry points from the `entrypoints.inactive` folder to directly in the `entrypoints` folder to enable them.
Popup is enabled by default.
*: For `sidepanel`, wxt does not automatically add the `sidePanel` permission. You must manually add it to the `manifest` field in `wxt.config.js`. Related: [wxt#544](https://github.com/wxt-dev/wxt/issues/544)
*: For `onboarding`, to retrieve the URL of the onboarding page, use `browser.runtime.getURL('/onboarding.html')`.
## eslint
If you are using vscode, autofix should already be enabled. You can run `bun lint` to check for errors and `bun lint:fix` to fix most of them.
> Thanks for antfu's elegant design philosophy in eslint configuration.
## shadcn/ui
To use it, refer to the [documentation](https://ui.shadcn.com/docs/cli#add)
> tldr: To add components using `npx shadcn@latest add`, select them by pressing `space` and submit with `enter`. If adding a code file, simply type the component name for autocompletion in vscode.
## trpc
1. Replace the `background` and `popup` entrypoints with the ones in the `entrypoints.inactive/trpc` folder.
2. Install the needed packages:
```shell
# trpc with react-query, see https://trpc.io/docs/v10/client/react/setup
bun i @trpc/client @trpc/server @trpc/react-query @tanstack/react-query@4
# trpc-chrome
bun i trpc-chrome
# zod
bun i zod
# mitt, event emitter, for trpc subscription
bun i mitt
```
## Advanced Configuration
### cli submit
0. You need to manually upload the extension to the Chrome Web Store the first time. After that, you can get the `CHROME_EXTENSION_ID`.
1. Rename the file `.env.submit.example` to `.env.submit` and fill in the `CHROME_EXTENSION_ID`.
2. Add the following settings to your shell config file. Keep them safe. See https://github.com/fregante/chrome-webstore-upload-keys for how to get the keys.
```shell
export CHROME_CLIENT_ID=""
export CHROME_REFRESH_TOKEN=""
export CHROME_CLIENT_SECRET=""
```
3. Now you can run `bun submit:latest` for faster submission.
> `bun submit:latest` is an alias for `bun exec 'rm -rf .output'; wxt zip && wxt submit --chrome-zip .output/*.zip`