Update README.md
This commit is contained in:
138
README.md
138
README.md
@@ -1,78 +1,3 @@
|
||||
<div align="center">
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/99cb6303-64e4-4bed-bf3f-35735353e6de" />
|
||||
<source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/a5dbf71c-c509-4c4f-80f4-be88a1943b0a" />
|
||||
<img alt="Logo" src="https://github.com/user-attachments/assets/99cb6303-64e4-4bed-bf3f-35735353e6de" />
|
||||
</picture>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="https://discord.gg/4ERQ6jgV9a" target="_blank"><img src="https://discord.com/api/guilds/1263404974830915637/widget.png"/></a>
|
||||
|
||||
> This boilerplate
|
||||
> has [Legacy version](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/tree/legacy)
|
||||
|
||||
</div>
|
||||
|
||||
> [!NOTE]
|
||||
> This project is listed in the [Awesome Vite](https://github.com/vitejs/awesome-vite)
|
||||
|
||||
> [!TIP]
|
||||
> Share storage state between all pages
|
||||
>
|
||||
> https://github.com/user-attachments/assets/3b8e189f-6443-490e-a455-4f9570267f8c
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Intro](#intro)
|
||||
- [Features](#features)
|
||||
- [Structure](#structure)
|
||||
- [ChromeExtension](#structure-chrome-extension)
|
||||
- [Packages](#structure-packages)
|
||||
- [Pages](#structure-pages)
|
||||
- [Installation](#installation)
|
||||
- [Chrome](#installation-chrome)
|
||||
- [Firefox](#installation-firefox)
|
||||
- [Install dependency](#install-dependency)
|
||||
- [For root](#install-dependency-for-root)
|
||||
- [For module](#install-dependency-for-module)
|
||||
- [Environment variables](#env-variables)
|
||||
- [Add new](#env-variables-new)
|
||||
- [Set via CLI](#env-variables-cli-set)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
- [Hot module reload seems to have frozen](#hot-module-reload-seems-to-have-frozen)
|
||||
- [Imports not resolving correctly](#imports-not-resolving-correctly)
|
||||
- [Community](#community)
|
||||
- [Debugging](#debugging)
|
||||
- [Reference](#reference)
|
||||
- [Star History](#star-history)
|
||||
- [Contributors](#contributors)
|
||||
|
||||
## Intro
|
||||
|
||||
This boilerplate helps you create Chrome/Firefox extensions using React and Typescript. It improves
|
||||
the build speed and development experience by using Vite and Turborepo.
|
||||
|
||||
## Features
|
||||
|
||||
- [React](https://reactjs.org/)
|
||||
- [TypeScript](https://www.typescriptlang.org/)
|
||||
- [Tailwindcss](https://tailwindcss.com/)
|
||||
- [Vite](https://vitejs.dev/) with [Rollup](https://rollupjs.org/)
|
||||
- [Turborepo](https://turbo.build/repo)
|
||||
- [Prettier](https://prettier.io/)
|
||||
- [ESLint](https://eslint.org/)
|
||||
- [Chrome Extensions Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/)
|
||||
- [Custom i18n package](/packages/i18n/)
|
||||
- [Custom HMR (Hot Module Rebuild) plugin](/packages/hmr)
|
||||
- [End-to-end testing with WebdriverIO](https://webdriver.io/)
|
||||
|
||||
## Installation
|
||||
|
||||
1. Clone this repository.( ```git clone https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite``` )
|
||||
@@ -210,66 +135,3 @@ Other useful packages:
|
||||
- `module-manager` - run `pnpm module-manager` to enable/disable modules
|
||||
- `e2e` - run `pnpm e2e` for end-to-end tests of your zipped extension on different browsers
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Hot module reload seems to have frozen
|
||||
|
||||
If saving source files doesn't cause the extension HMR code to trigger a reload of the browser page, try this:
|
||||
|
||||
1. Ctrl+C the development server and restart it (`pnpm run dev`)
|
||||
2. If you get a [`grpc` error](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/612),
|
||||
[kill the
|
||||
`turbo` process](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/612#issuecomment-2518982339)
|
||||
and run `pnpm dev` again.
|
||||
|
||||
### Imports not resolving correctly
|
||||
|
||||
If you are using WSL and imports are not resolving correctly, ensure that you have connected VS Code to WSL remotely using the [Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) extension.
|
||||
|
||||
## Community
|
||||
|
||||
To chat with other community members, you can join the [Discord](https://discord.gg/4ERQ6jgV9a) server.
|
||||
You can ask questions on that server, and you can also help others.
|
||||
|
||||
Also, suggest new features or share any challenges you've faced while developing Chrome extensions!
|
||||
|
||||
## Debugging
|
||||
|
||||
If you're debugging one, you can use [Brie](https://go.briehq.com/github?utm_source=CEB) lets you capture screenshots, errors, and network activity, making it easier for us to help.
|
||||
|
||||
## Reference
|
||||
|
||||
- [Chrome Extensions](https://developer.chrome.com/docs/extensions)
|
||||
- [Vite Plugin](https://vitejs.dev/guide/api-plugin.html)
|
||||
- [Rollup](https://rollupjs.org/guide/en/)
|
||||
- [Turborepo](https://turbo.build/repo/docs)
|
||||
- [Rollup-plugin-chrome-extension](https://www.extend-chrome.dev/rollup-plugin)
|
||||
|
||||
## Star History <a name="star-history"></a>
|
||||
|
||||
<a href="https://star-history.com/#Jonghakseo/chrome-extension-boilerplate-react-vite&Date">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=Jonghakseo/chrome-extension-boilerplate-react-vite&type=Date&theme=dark" />
|
||||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=Jonghakseo/chrome-extension-boilerplate-react-vite&type=Date" />
|
||||
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=Jonghakseo/chrome-extension-boilerplate-react-vite&type=Date" />
|
||||
</picture>
|
||||
</a>
|
||||
|
||||
## Contributors <a name="contributors"></a>
|
||||
|
||||
This Boilerplate is made possible thanks to all of its contributors.
|
||||
|
||||
<a href="https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/graphs/contributors">
|
||||
<img width="500px" src="https://contrib.rocks/image?repo=Jonghakseo/chrome-extension-boilerplate-react-vite" alt="All Contributors"/>
|
||||
</a>
|
||||
|
||||
---
|
||||
|
||||
## Special Thanks To
|
||||
|
||||
| <a href="https://jb.gg/OpenSourceSupport"><img width="40" src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.png" alt="JetBrains Logo (Main) logo."></a> | <a href="https://www.linkedin.com/in/j-acks0n"><img width="40" style="border-radius:50%" src='https://avatars.githubusercontent.com/u/23139754' alt='Jackson Hong'/></a> |
|
||||
|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
|
||||
---
|
||||
|
||||
Made by [Jonghakseo](https://jonghakseo.github.io/)
|
||||
|
||||
Reference in New Issue
Block a user