# chrome-extension-react18

**Repository Path**: zhao-jingtao-l/chrome-extension-react18

## Basic Information

- **Project Name**: chrome-extension-react18
- **Description**: 基于 React + vite 来进行谷歌插件开发的 扩展程序清单文件定义在 `src/manifest.js` 通过vite的配置，在 `@samrum/vite-plugin-web-extension` 中使用
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://gitee.com/zhao-jingtao-l
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-28
- **Last Updated**: 2024-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, vite, Redux, TypeScript, Less

## README

# web-extension

这个是使用 React + vite 来进行谷歌插件开发的

## 使用说明

扩展程序清单文件定义在 `src/manifest.js` 通过vite的配置，在 `@samrum/vite-plugin-web-extension` 中使用.

后台程序, 内容脚本, 选项, 和弹出层的出入口点在 `src/entries` 文件夹.

内容脚本由 `src/entries/contentScript/renderContent.js` 在ShadowRoot中渲染内容
并处理样式并注入到HMR和构建模块中。

否则，项目的功能就像普通的Vite项目一样。

Manifest V3开发期间的HMR要求Chromium版本>= 110.0.5480.0。

请参阅[@samrum/vite-plugin-web-extension](https://github.com/samrum/vite-plugin-web-extension)了解更多使用说明。

## 自定义配置

查看 [Vite配置参考](https://vitejs.dev/config/).

## 项目设置

```sh
npm install
```

## 命令

### 构建

#### 开发模式 Development, HMR

热模块重载用于内联加载更改，而不需要重新构建扩展和重新加载扩展/页面
目前只适用于基于Chromium的浏览器。

```sh
npm run dev
```

#### 开发模式 Development, Watch

根据文件更改重建扩展名。需要重新加载扩展(如果使用内容脚本则需要重新加载页面)

```sh
npm run watch
```

#### 生产环境 Production

> 注意，打包将会生成一个crx文件和一个zip文件，请确保项目中存在extension文件夹，否则zip包会打包失败~

最小化和优化扩展构建

```sh
npm run build
```

### 在浏览器中加载插件

将dist目录的内容加载到指定的浏览器中

```sh
npm run serve:chrome
```

```sh
npm run serve:firefox
```

## 依赖说明

### web-ext

这是一个命令行工具，可帮助构建、运行和测试 WebExtensions。

最终，它旨在支持标准、可移植、 跨平台的方式。最初，它将为开发 Firefox 扩展提供简化的体验。

以下是您可以运行的命令。单击每个以获取详细文档或在命令行上使用，例如