https://github.com/vincecao/react-chrome-extension-template-side-panel
A simple React implementation of a Chrome Extension Template for a foldable side panel. With Parcel, TypeScript, TailwindCSS
https://github.com/vincecao/react-chrome-extension-template-side-panel
chrome-extension parcel react tailwindcss typescript
Last synced: 6 months ago
JSON representation
A simple React implementation of a Chrome Extension Template for a foldable side panel. With Parcel, TypeScript, TailwindCSS
- Host: GitHub
- URL: https://github.com/vincecao/react-chrome-extension-template-side-panel
- Owner: vincecao
- Created: 2020-02-28T09:33:05.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-04-08T04:00:37.000Z (6 months ago)
- Last Synced: 2025-04-12T06:43:28.701Z (6 months ago)
- Topics: chrome-extension, parcel, react, tailwindcss, typescript
- Language: HTML
- Homepage: https://vincecao.github.io/react-chrome-extension-template-side-panel
- Size: 2.95 MB
- Stars: 51
- Watchers: 4
- Forks: 16
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Chrome Extension Template: Side Panel
A simple [React](https://reactjs.org/) implementation of a Chrome Extension Template for a foldable side panel. Using [Parcel](https://parceljs.org/), [TailwindCSS](https://tailwindcss.com/) and [TypeScript](https://www.typescriptlang.org/) for development. Optimized to fit most of the modern webpage and save setting to chrome storage.
Check the demo in this [here](https://vincecao.github.io/react-chrome-extension-template-side-panel).
https://user-images.githubusercontent.com/17363908/189584314-cfa11ac3-bac4-4726-963e-86a0e238fced.mp4
## Development
``` bash
# clone the repo
git clone https://github.com/vincecao/react-chrome-extension-template-side-panel.git && cd react-chrome-extension-template-side-panel
# install needed package
yarn
# add logo under /public/manifest.json
# for local test
yarn start
# then open localhost:1234
# build the extension
yarn build
```
## Installation
* After build process, open Chrome or any chromium based browser
* Go to manage extension page
* Toggle `Developer mode`
* Choose Load unpacked option for `/publish` folder or unzip latest [release](https://github.com/vincecao/react-chrome-extension-template-side-panel/releases) file.