create-chuntianxiaozhu/template-plugin-chrome/README.md

春天小猪模板工具

# 简介

春天小猪浏览器插件 V3 版本框架

## 安装

```
npm create chuntianxiaozhu {projectname}
```

```
将_vscode 更改为 .vscode
```

## 目录

.vscode chorme 开发提示
public 公共资源
src 源代码
.eslintrc.cjs 语法控制
.gitignore
build.crx
build.pem
index.html
key.pem
manifest.config.ts 预处理文件
manifest.json 配置文件
options.html 插件主菜单页面
pacakge.json
README.md
tsconfig.json ts 控制
vite.config.ts vite 配置
yarn.lock 使用 yarn 安装包

## 开发调试

执行：

```
npm run dev
```

在浏览器中采用导入文件夹作为插件

即可打开浏览器控制台和插件的 serviceworker 进行调试

## build 项目

执行：

```
npm run build
```

即可生成最终 Chrome Extension 文件。

## 精简最终 build 文件

build 生成的最终文件，可删除以下文件：

```
    ├─ /images
    ├─ /static
    |  ├─ /css
    |  |  ├─ content.css
    |  |  ├─ main.css
    |  ├─ /js
    |  |  ├─ background.js
-   |  |  ├─ background.js.LICENSE.txt
    |  |  ├─ content.js
-   |  |  ├─ content.js.LICENSE.txt
    |  |  ├─ main.js
-   |  |  ├─ main.js.LICENSE.txt
    |  ├─ /media
-   ├─ asset-manifest.json
    ├─ favicon.ico
    ├─ index.html
    ├─ insert.js
    ├─ manifest.json
-   ├─ precache-manifest.xxxxxxx.js
-   ├─ service-worker.js
    |- ...
```

## 安装

chrome Extensions 直接 Load unpacked build 目录即可

## 知识点

1. chorme 发送 request 请求时会自动带上对应域名的 cookie