An open API service indexing awesome lists of open source software.

https://github.com/botshen/chrome-extension-typescript-react-template


https://github.com/botshen/chrome-extension-typescript-react-template

Last synced: over 1 year ago
JSON representation

Awesome Lists containing this project

README

          

# Chrome extension template repo written in Typescript and React.

Table of contents:

- [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)

## 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`.