84 lines
1.6 KiB
Markdown
84 lines
1.6 KiB
Markdown
# Chrome extension template repo written in Typescript and React.
|
|
|
|
Table of contents:
|
|
|
|
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
|
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
|
|
- [Prerequisites](#prerequisites)
|
|
- [Option](#option)
|
|
- [Includes the following](#includes-the-following)
|
|
- [Project Structure](#project-structure)
|
|
- [Setup](#setup)
|
|
- [Open in Visual Studio Code](#open-in-visual-studio-code)
|
|
- [Build](#build)
|
|
- [Build in watch mode](#build-in-watch-mode)
|
|
- [terminal](#terminal)
|
|
- [Visual Studio Code](#visual-studio-code)
|
|
- [Load extension to chrome](#load-extension-to-chrome)
|
|
- [Test](#test)
|
|
|
|
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
|
|
## Prerequisites
|
|
|
|
- [node + npm](https://nodejs.org/) (Current Version)
|
|
|
|
## Option
|
|
|
|
- [Visual Studio Code](https://code.visualstudio.com/)
|
|
|
|
## Includes the following
|
|
|
|
- TypeScript
|
|
- Webpack
|
|
- React
|
|
- Jest
|
|
- Code
|
|
- Chrome Storage
|
|
- Badge number
|
|
- Background script
|
|
|
|
## Project Structure
|
|
|
|
| Folder | Description |
|
|
| ------------ | -------------------------- |
|
|
| `src/` | TypeScript source files |
|
|
| `public/` | static files |
|
|
| `dist` | Chrome Extension directory |
|
|
| `dist/js` | Generated JavaScript files |
|
|
|
|
|
|
## Setup
|
|
|
|
```
|
|
npm install
|
|
```
|
|
|
|
## Build
|
|
|
|
```
|
|
npm run build
|
|
```
|
|
|
|
## Build in watch mode
|
|
|
|
### terminal
|
|
|
|
```
|
|
npm run watch
|
|
```
|
|
|
|
### Visual Studio Code
|
|
|
|
Run watch mode.
|
|
|
|
type `Ctrl + Shift + B`
|
|
|
|
## Load extension to chrome
|
|
|
|
Load `dist` directory.
|
|
|
|
## Test
|
|
|
|
Run `npx jest` or `npm run test`.
|