diff --git a/README.md b/README.md index 7ff88aa..f258c8c 100755 --- a/README.md +++ b/README.md @@ -1,78 +1,3 @@ -
- - - - - Logo - - -![](https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=black) -![](https://img.shields.io/badge/Typescript-3178C6?style=flat-square&logo=typescript&logoColor=white) -![](https://badges.aleen42.com/src/vitejs.svg) - -![GitHub action badge](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/actions/workflows/build-zip.yml/badge.svg) -![GitHub action badge](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/actions/workflows/lint.yml/badge.svg) - - - -> This boilerplate -> has [Legacy version](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/tree/legacy) - -
- -> [!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 - - - - - - Star History Chart - - - -## Contributors - -This Boilerplate is made possible thanks to all of its contributors. - - - All Contributors - - ---- - -## Special Thanks To - -| JetBrains Logo (Main) logo. | Jackson Hong | -|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------| - ---- - -Made by [Jonghakseo](https://jonghakseo.github.io/)