# vite_chrome_plugin

**Repository Path**: qc-web-y/vite_chrome_plugin

## Basic Information

- **Project Name**: vite_chrome_plugin
- **Description**: 欢迎使用我的 Vite/Vue3/TS Develop Chrome Plugin，如果你觉得给你带来的帮助，请给一颗小星星哦～
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-04-10
- **Last Updated**: 2024-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ViteChromePlugin

欢迎使用我的 Vite/Vue3/TS Develop Chrome Plugin，如果你觉得给你带来的帮助，请给一颗小星星哦～

## Command

- `npm run dev` 启动开发模式
- `npm run build` 编译打包插件
- `npm run zip` 自动将插件压缩为 tzip 包，需要全局安装 7zip 包方可使用

#### 7zip包安装方法

- Windows 使用：`npm install -g 7zip`
- Mac 使用：`brew install p7zip`

#### Chrome 开发调试

1. 运行 `npm run build` 编译打包好插件

   <img src="./introduce/npm-run-build-img.jpg" height="150" alt="编译插件">

2. 打开扩展程序开发者模式，【加载已解压的扩展程序】

   <img src="./introduce/chrome-plugins-manager.jpg" width="100" alt="扩展管理">

   <img src="./introduce/chrome-plugins-dev-mode.jpg" width="300" alt="开发模式">

3. 选择刚才编译好的 dist 目录

   <img src="./introduce/selected-dist-dir.jpg" width="200" alt="选择插件">

4. 在所有扩展程序中就可以查阅啦！

   <img src="./introduce/vite-chrome-plugin.jpg" height="200" alt="查阅插件">
   <img src="./introduce/vite-chrome-plugin-fixed.jpg" height="200" alt="固定插件">

   <img src="./introduce/vite-chrome-plugin-demo.jpg" width="600" alt="插件效果">

> 当前开发模式仅支持对UI界面的编辑及调试，具体的 Chrome 后台及内容操作还是需要至 <扩展程序开发者模式> 下进行调试哦～

> 具体的调试及报错请移步 [Chrome for Developers](https://developer.chrome.com/docs/extensions?hl=zh-cn) 自行查阅

## 开发目录

- <img src="./introduce/dev-dir-img.jpg" width="200" alt="开发目录">

## 编译目录

- <img src="./introduce/dist-dir-img.jpg" width="200" alt="编译目录">