react-vite-chrome-extension

KO | EN

gitlite — search

#javascript #python #hacktoberfest #golang #android #linux #docker #java #awesome #awesome-list #vue #security #openai #open-source

react-vite-chrome-extension

(★ 44)

Boilerplate for creating a Google Chrome Extension with React + TypeScript + Vitejs + TailwindCSS.

react-vite-chrome-extension 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React TypeScript + Vite Chrome Extension Starter

![build](https://github.com/timelessco/react-vite-chrome-extension/workflows/build/badge.svg)

![react-vite-chrome-extension](https://raw.githubusercontent.com/timelessco/react-vite-chrome-extension/main/assets/cover.png)

This project is a boilerplate for creating a Google Chrome Extension with React + Vitejs + TailwindCSS + TypeScript.

- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev/)
- [Tailwind CSS](https://tailwindcss.com/)
- [TypeScript](https://www.typescriptlang.org/)

## :bulb: Preview

![react-vite-chrome-extension](https://raw.githubusercontent.com/timelessco/react-vite-chrome-extension/main/assets/preview.png)

## :package: Requirements

- Nodejs v18+ LTS

## :atom_symbol: Development

- Clone this repository

```
git clone https://github.com/timelessco/react-vite-chrome-extension
```

- Install dependencies

```
pnpm install
```

- Start Development Server

```
pnpm dev
```

## :computer: Production

- Building the chrome extension for production

```
pnpm build
```

## :rocket: Usage

- You can find the chrome extension contents in the `dist` folder
- Open `chrome://extension` and turn on Developer Mode.
- Click the `Load unpacked extension` button.
- Now, select the `dist` folder.
- Your extension is ready to use.

### :hamburger: Additional Details

- This boilerplate can be extended even further using [Chrome Extension APIs](https://developer.chrome.com/docs/extensions/reference/)
- You can use [Content Scripts](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) to inject content into the page or accessing the DOM conent.
- By using the [Message Passing](https://developer.chrome.com/extensions/messaging) API, you can communicate with the content script and the popup.

## :green_heart: Message

I hope you find this useful. If you have any questions, please create an issue.

## :mortar_board: License

- MIT

react-vite-chrome-extension

react-vite-chrome-extension 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-vite-chrome-extension

react-vite-chrome-extension 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README