背景
之前写过一篇文章《从开发chrome插件到插件系统设计》，主要讲述了如何开发一个chrome插件和chrome插件设计，感兴趣的同学可以再去看看。
目前主流web应用都是基于Vue、React等现代框架去开发，Chrome插件本身而言其实也是一个web应用，看它的组成部分popup.html + contentscript + background.js ，只需要在开发的时候调整一下构建脚本基本上就可以利用Vue、React等现代框架去开发了。
接下来，我们就一步步开始实战。
项目搭建
初始化
利用vite初始化项目命令快速搭建，具体如下：
$ pnpm create vite
1.在public目录下新建manifest.json
内容如下：
{ "name": "ngptcommit", "version": "1.0", "description": "ngptcommit自动生成git commit信息", "manifest_version": 2, "browser_action": { "default_popup": "index.html" }, "icons": { "16": "images/favicon-16x16.png", "48": "images/favicon-32x32.png", "64": "images/android-chrome-192x192.png", "128": "images/android-chrome-192x192.png" }, "background": { "scripts": [ "background/background.js" ] }, "permissions": [ "tabs", "storage", "http://*/*", "https://*/*", "activeTab", "contextMenus", "notifications", "webRequest", "webRequestBlocking", "cookies", "unlimitedStorage", "webNavigation", "identity", "identity.email", "identity.read", "identity.write", "identity.launch.webauthn", "identity.launch.webauthn", "identity.manage.accounts" ] }
新增插件必须的文件，如：manifest.json和 background.ts ，完整目录结构如下：
chrome-extension ├── README.md ├── index.html ├── package.json ├── public | ├── images | └── manifest.json ├── src | ├── App.vue | ├── background.ts | ├── components | ├── main.ts | ├── style.css | └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts
由于vite初始化项目只针对web应用设计，但是我们开发chrome插件还需要针对background.ts 去做编译，就是要做多入口编译，而且vite本身就是基于rollup为基础去实现的少量配置即可完成一个web应用打包。
一套构建指令，它使用**
Rollup** 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。—— Vite官网介绍
所以我们其实可以使用Rollup去打包我们的background.ts ，就是增加多一个入口文件，具体如下:
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], build: { rollupOptions: { input: { index: path.resolve(__dirname, 'index.html'), background: 'src/background.ts', }, output: { entryFileNames: `[name].js`, assetFileNames: `[name].[ext]`, chunkFileNames: `[name].js`, }, }, }, })
其中有几个地方需要说明一下：
output： 设置不加hash值，后续调试的时候插件不会出现加载不到文件的错误rollupOptions：基本上和Rollup的配置项一模一样，所以有Rollup基础的基本上可以直接上手配置，而且也完全兼容Rollup的插件生态
接下来就是调整package.json中scripts命令，需要针对background新增两个命令，具体如下：
{ "name": "@node-gptcommit/chrome-extension", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "rimraf dist && vite", "build": "vue-tsc && vite build", "preview": "vite preview" }, ... }
dev:background代表开发模式build:background代表生产模式
到了这里基本上就完成了项目的搭建，接下来就进入开发阶段。
项目开发
UI开发
1.引入ui库 tdesign-vue-next ，tdesign是腾讯出品的全端组件库，从桌面到移动，再到小程序，应有尽有，大家可以去尝尝鲜tdesign.tencent.com/
pnpm add tdesign-vue-next
2.开发UI，这里就直接撸代码就行，就不展开来讲，主要需要注意的是，需要和background.js通讯的部分，比如需要和chatgpt发送信息，获取返回内容，具体如下:
const getSummary = () => { // 发送通讯，获取总结 chrome.runtime.sendMessage( { type: 'summary', data: { diffs: [] } }, (response) => { console.log(response) }, ) }
}
编写background.ts
import { getSummary } from '@node-gptcommit/summarize' // 监听收到通讯，发起总结请求 chrome.runtime.onMessage.addListener(async (request: any, sender: any, sendResponse: any) => { const { type = 'fetch', data } = request; if (type === 'summary') { getSummary(data).then(res=>{ sendResponse(res); }) } });
调试
在开发中遇到一个问题，就是如何快速调试chrome插件：
1.build后会，构建完的文件会有带hash值，如：index.33addf.js，导致chrome重新加载插件的时候出错，如：
解决方案很简单，就是利用rollupOptions设置输出文件不带hash值即可。
2.没法实时调试插件，每次都需要build后才能去调试，这里需要更改构建方式，因为我们build出来的页面才是我们需要的，所以我们需要在build时候增加--watch，然后真正发布构建的时候关闭watch，调整后，package.json内容如下：
{ "name": "@node-gptcommit/chrome-extension", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vue-tsc && vite build --watch", "build": "rimraf dist && vue-tsc && vite build", "preview": "vite preview" }, ... }
项目源码Github地址：node-ngptcommit，觉得有帮助的同学帮忙给个star给鼓励一下~❤️
后面基本上就是按照正常项目去开发即可，本文总结几个要点：
- chrome插件开发和正常web应用不太应用，既包括了html页面，也包括background.js的js库开发模式
- Vite的核心点其实是Rollup，如果掌握Rollup基本上对vite做二次配置也很容易入手
- 为什么使用Vue，因为有大量的UI库和相关生态可以使用，能提高开发效率
