背景
Chrome扩展相关文章很多均是围绕普通的HTML和JS来展开的,与当前的前端开发技术栈不匹配,很多人的前端制品均是使用工具来构建产生的。
当前Chrome扩展结构简单的时候,纯HTML的JS的编写也问题不大,但当有了较多的第三方依赖包之后,就会产生巨大的效率差异:
- 使用构建的方式,可以使用npm方便地来管理依赖。
- 普通HTML和JS需要一个个将第三方包的CDN地址粘贴进页面中,管理比较困难。
于是使用工具来构建Chrome扩展是个不错的选择。
工具与语言选择
TypeScript + Vue3
- 使用 TypeScript 开发可以规范工程结构,同时在IDE时也会更加友好。
- 使用 Vue3 作为单页应用的Web应用主框架,同时配合 Vite 作为构建工具。
- 使用CRXJS Vite Plugin来使Vite构建的产物能够打包成一个Chrome扩展。
工程生成
参考 npm create vue@3
来直接生成工程目录。
其中几个选择需要注意:
- Add TypeScript? YES 否则就是是个ES6的工程。
- Add Vue Router? YES 创建的时候可以选择安装VueRouter,后续的页面也均是以单页应用的方式展开。VueRouter不熟悉的可以参考Vue Router详细教程
执行完成之后,这个工程就是一个标准的 Vue3+Typescript 工程了。
进入到工程目录之后,我们执行yarn install
或 npm install
将工程中的依赖都下载下来。
完成之后目录如下图所示
-rw-r--r-- 1 1674 1 26 17:14 README.md
-rw-r--r-- 1 38 1 26 17:14 env.d.ts
-rw-r--r-- 1 331 1 26 17:14 index.html
drwxr-xr-x 230 7360 1 26 17:16 node_modules
-rw-r--r-- 1 873 1 26 17:14 package.json
drwxr-xr-x 3 96 1 26 17:14 public
drwxr-xr-x 8 256 1 26 17:14 src
-rw-r--r-- 1 219 1 26 17:14 tsconfig.config.json
-rw-r--r-- 1 275 1 26 17:14 tsconfig.json
-rw-r--r-- 1 300 1 26 17:14 vite.config.ts
-rw-r--r-- 1 97022 1 26 17:16 yarn.lock
执行 npm run build
能够看到产出的制品:
$ npm run build
> abc@0.0.0 build
> run-p type-check build-only
> abc@0.0.0 type-check
> vue-tsc --noEmit
> abc@0.0.0 build-only
> vite build
vite v4.0.4 building for production...
✓ 46 modules transformed.
dist/assets/logo-da9b9095.svg 0.31 kB
dist/index.html 0.42 kB
dist/assets/AboutView-4d995ba2.css 0.09 kB │ gzip: 0.10 kB
dist/assets/index-b9365240.css 4.18 kB │ gzip: 1.31 kB
dist/assets/AboutView-fe92dac1.js 0.23 kB │ gzip: 0.20 kB
dist/assets/index-c7d3f2c1.js 83.97 kB │ gzip: 33.05 kB
这是标准的单页应用的结构,但是这个结构Chrome扩展并不认识,于是我们需要引入一个插件进行Chrome扩展的构建。
关于Chrome扩展的工程结构上有哪些文件?可以参考这个问题
Chrome扩展程序构建
参考
使用下面的命令将crxjs引入:npm i @crxjs/vite-plugin@latest -D
从前面Chrome扩展程序的介绍可以知道, manifest.json
是扩展程序最核心的一个文件,描述了这个扩展程序有哪些资源。是的,这个CRXJS插件也是使用这个文件中的描述,使用vite进行制品生成的。
在工程的根目录下创建一个manifest.json
文件:
{
"manifest_version": 3,
"name": "CRXJS Vue Vite Example",
"version": "1.0.0",
"action": { "default_popup": "index.html" }
}
然后修改vite.config.ts
,加入下面三行代码
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'
// defineConfig 的 plugins 中加入crx
crx({ manifest })
修改完成后 vite.config.ts
的代码如下图所示:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json' // Node 14 & 16
export default defineConfig({
plugins: [
vue(),
crx({ manifest })
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
然后尝试使用npm run build
,会遇到一些问题,下面收集了这个过程中会产生的问题,供大家参考
问题解决:
问题1:放在根目录下的manifest.json
文件无法被使用:
解决1:在tsconfig.config.json
中的include
字段中加入"manifest.json"
问题2: 构建报错 [ERROR] [plugin externalize-deps] Failed to resolve entry for package "@crxjs/vite-plugin". The package may have incorrect main/module/exports specified in its package.json.
解决2: 在package.jso
n中加入 "type": "module"
,使用标准的模块方式引用依赖。
构建制品
在解决了上述的问题之后,可以看一下产出的制品已经包含了manifest.json
vite v4.0.4 building for production...
✓ 48 modules transformed.
dist/manifest.json 0.14 kB
dist/assets/logo-da9b9095.svg 0.31 kB
dist/index.html 0.43 kB
dist/assets/AboutView-4d995ba2.css 0.09 kB │ gzip: 0.10 kB
dist/assets/index-b9365240.css 4.18 kB │ gzip: 1.31 kB
dist/assets/AboutView-bce53526.js 0.23 kB │ gzip: 0.20 kB
dist/assets/index.html-b820a928.js 83.97 kB │ gzip: 33.05 kB
在浏览器的更多工具 → 扩展程序 中,点击 加载已解压的扩展程序,将目录指向上面制品的产生的dist目录即可:
如下图可以看到,一个应用的popup页面已经嵌入了我们在第一步构建出来的vue页面。