背景
之前写过一篇文章《从开发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库和相关生态可以使用,能提高开发效率