# chrome-extention-vite-template

**Repository Path**: Samisland/chrome-extention

## Basic Information

- **Project Name**: chrome-extention-vite-template
- **Description**: 基于vite的chrome-extention构建工具
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-13
- **Last Updated**: 2024-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: chromeExtention, vite

## README

# **[chrome-extention-vite-template](https://gitee.com/Samisland/chrome-extention)**

## 简介

chrome-extention-vite-template是款基于vue3+unocss搭建的chrome extention(v3)快速开发平台；

## 功能特点

- 使用vue3、unocss，实现组件化开发。
- 即时构建。保存后同时构建newtab、options、popup、content_script和service_worker部分的代码，输出产物可直接运行于chrome；

![1705285593928](./product.png)

- 基于vite，更少的无关代码倾入；
- 路由支持：集成了vue-router，内置了一个路由配置简化工具（getRoutesByRouterConf）

## 依赖清单

```json
{
  "dependencies": {
    "pinia": "^2.1.4",
    "vue": "^3.3.11",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@unocss/preset-attributify": "^0.56.5",
    "@unocss/preset-icons": "^0.56.5",
    "@unocss/preset-uno": "^0.56.5",
    "@vitejs/plugin-vue": "^4.5.2",
    "nodemon": "^3.0.2",
    "unocss": "^0.58.3",
    "vite": "^5.0.8",
    "vite-plugin-html": "^3.2.1",
    "vite-plugin-top-level-await": "^1.4.1",
    "vite-plugin-vue-devtools": "^7.0.8"
  }
}
```

## 使用步骤

1.clone项目

```git
git clone https://gitee.com/Samisland/chrome-extention.git
```

2.安装依赖

```
npm install
```

3.运行项目

```npm
npm run dev
```

4.使用chrome浏览器预览

* 拓展程序→管理拓展程序→打开开发者模式→加载已解压的拓展程序→选择项目目录下的dis文件夹

5.编辑代码

* 修改代码，保存，即可在拓展程序查看修改效果

## 目录结构

```shell
|
|——dist 产物目录，chrome拓展程序根目录
|——public 拓展资源目录
	|——manifest.json chrome拓展配置文件
	|——iconx.png chrome拓展图标
|——src 源代码主目录
	|——assets 通用静态资源目录
	|——components 通用组件目录
	|——content_sripts 用于存放chrome拓展的content_sripts脚本
		|——content_sripts.js content_sripts脚本
	|——newtab 用于存放chrome拓展的newtab页面
		|——newtab.html newtab入口html文件
		|——newtab.js newtab入口js文件
		|——newtab.vue newtab入口vue文件
	|——options 用于存放chrome拓展的options页面
		|——options.html options入口html文件
		|——options.js options入口js文件
		|——options.vue options入口vue文件
	|——popup 用于存放chrome拓展的popup页面
		|——popup.html popup入口html文件
		|——popup.js popup入口js文件
		|——popup.vue popup入口vue文件
	|——service_worker 用于存放chrome拓展的service_worker脚本
		|——service_worker.js service_worker脚本
|——package.json 项目依赖管理目录
|——.gitignore
|——nodemon.json nodemon构建目录
|——README.md
|——uno.config.js unocss配置目录
|——vite.config.js 构建newtab、options、popup部分的代码
|——vite.config.script.js 构建content_script和service_worker部分的代码
```

## 配置说明

### 1.manifest.json

* 是chrome拓展的主配置文件
* 配置本地资源路径是，推荐使用已`/`开头，即相对于的更目录

### 2.vite.config.js

* 是构建newtab、options、popup三部分的配置文件，每一部分都是一个vue3的项目

### 3.vite.config.script.js

* 是构建content_script和service_worker部分的代码的配置文件，与上三部分不同，这两部分采用lib方式构建

### 2.页面路由（可选）

* newtab、options、popup三个模块分别是一个vue3项目，其内置了vue-router，可以实现spa路由导航
* 基于chrome拓展开发特点，我们内置了一个getRoutesByRouterConf函数简化路由配置;
* 以option模块为例：
  * 在options.js中添加路由
  * 新建路由同名文件夹，在文件夹下新建index.vue即为该路由的入口文件

```js
// options.js
app.use(getRouter('newtab', [
  ['', 'Index'],
]));
```

```vue
// Index/index.vue
<template>
  newtab子页面
</template>    
```

## 开发计划(TODO)

* 区分开发阶段和生产阶段
* 开发阶段源码sourcemap