Vue + Vite 开发 Chrome 浏览器插件

前言

使用 Vite + Vue 快速创建 Chrome 浏览器插件。

环境

名称	版本	备注
node	v16.15.0
npm	8.5.5
vite	2.9.0
create-vite	2.9.0
@crxjs/vite-plugin@1.0.14	1.0.14
@vitejs/plugin-vue@2.3.4	2.3.4
vue@3.2.37	3.2.37

注意版本兼容问题

创建项目

初始化项目

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


# 安装 node
# 配置 npm 的路径，加速仓库

# 安装 vite
npm i -g vite@2.9.0

# 安装 vite 的初始化模板
npm i -g create-vite@2.9.0

# 初始化 vite 项目
npm init vite

npm i @crxjs/vite-plugin -D

配置项目文件 vite.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json' // Node 14 & 16
import manifest from './manifest.json' assert { type: 'json' } // Node >=17

export default defineConfig({
  plugins: [
    vue(),
    crx({ manifest }),
  ],
})

浏览器拓展配置

vite.config.js 同目录下创建 manifest.json

1
2
3
4
5
6


{
  "manifest_version": 3,
  "name": "CRXJS Vue Vite Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" }
}

调试

1
2


# 生成 dist 文件夹
npm run dev

浏览器打开拓展管理界面，启用开发者模式，从“加载解压缩的拓展“打开 dist 文件夹，拓展即出现在拓展列表。

右键拓展 - 检查弹出窗口

该界面即是拓展的开发者工具界面（console.log()内容只会出现在该界面中）。

开发

参考简介 | Vue.js (vuejs.org)

参考

【1】Create a project | CRXJS Vite Plugin

【2】Home | Vite中文网 (vitejs.cn)

【3】简介 | Vue.js (vuejs.org)

【4】Extension development overview - Chrome Developers