WXT+Vue3+sass+antd+vite搭建项目开发chrome插件

前言

WXT的前身是vite-plugin-web-extension，vite-plugin-web-extension目前已经不再开发，只做维护，文章中静态js打包、静态js热更新、静态js混淆只是大概将了以下方法。不想费事的道友可通过此文章中的链接下载：https://blog.csdn.net/randy521520/article/details/146998467

一、初始化项目

1.cmd打开终端工具，运行：npx wxt@latest init

复制代码

yarn：npx wxt@latest init
npm：npx wxt@latest init
pnpm：pnpm dlx wxt@latest init
bun：bunx wxt@latest init

2.输入项目名称，键盘方向键选择vue

3.键盘方向键选择选择包管理器

4.项目创建成功

5.开发者工具打开项目，打开开发者工具的终端，运行yarn install，安装package.json中的依赖包，安装成功后运行

6.安装成功后运行yarn dev，在打开的浏览器中加载打包好的扩展程序

7.打开百度，固定扩展程序，点击扩展程序出现WXT+Vue的标识，说明项目已经初步搭建成功

8.项目目录分析

9.从上面的截图可以看出，默认的时TS语法，如果不想用TS，可以把所有的TS文件换成js文件，然后重新运行yarn dev，查看扩展程序可以正常使用

二、项目配置调整

1.在根目录新建manifest.js文件，修改wxt.config.js，增加manifest配置

2.运行yarn dev，标题、版本、描述已经配置成功；注意：这里的manifest.js不是所有配置项都可以配置的，WXT会生成自己的配置项，向action中的配置项是无法通过manifest.js修改的，在下图可以看出manifest.js文件已经修改action的标题，但是WXT生成的manifest.json文件中的action并不是manifest.js配置的标题

3.通过添加WXT模块修改action标题，在根目录新建modules>updateManifest.js，该文件不用引用，当构建项目时WXT会自己调用该模块

4.修改icon，只需要生成对应icon文件中的icon大小替换就行，访问：https://www.bejson.com/ui/imagehandler/可把icon转成任何尺寸

三、options页面配置

1.在entrypoints目录新建options文件夹，把popup中的文件复制到options文件夹，修改options>app.vue

2.修改popup>app.vue跳转到options页面

3.修改manifest.js，运行yarn dev，点击打开配置页，options页面可以正常跳转

四、集成antd

1.终端运行：yarn add ant-design-vue，安装antd

2.修改popue.vue，运行yarn dev，点击固定的插件，button正常显示

3.组件按需引入，运行yarn add unplugin-vue-components -D

4.修改wxt.config.js

5.修改popue.vue，删除button的导入语句，运行yarn dev，点击固定的插件，button正常显示

五、集成sass

1.终端运行：yarn add sass -D，安装sass

2.在assets中新建scss>global.scss、scss>globalMixin.scss、scss>globalVar.scss、scss>iframe.scss，global.scss用于通用的样式、globalMixin.scss用于Mixin通用的样式、globalVar.scss用于全局变量、iframe.scss用于导出scss文件，修改wxt.config.js，将iframe.scss文件引入到项目中

3.修改global.scss、globalMixin.scss、globalVar.scss，globalVar.scss

4.修改popue.vue，运行yarn dev，点击固定的插件，div样式使用了scss变量、Mixin函数、scss通用样式已生效

六、环境配置

1.在根目录新增.env.development、.env.production

2.修改package.json脚本命令

3.修改content.js，打印环境配置，运行yarn dev，修改content.js时需要把matches修改为<all_urls>，matches使用来匹配域名的，匹配上的域名content.js才会有效，F12查看控制台，环境配置成功

4.脚本命令说明

复制代码

1. yarn dev 启动开发环境
2. yarn pro 启动正式环境
3. yarn dev:firefox 启动Firefox开发环境
4. yarn pro:firefox 启动Firefox正式环境
5. yarn build 构建正式环境
6. yarn build:firefox 构建Firefox正式环境
7. yarn zip 打包正式环境
8. yarn zip:firefox 打包Firefox正式环境
9. yarn compile 类型检查

七、代码注入

1.在插件开发的时候，可能会由代码注入的场景，通过代码注入去操作某个网站的元素，如修改网站背景，在assets下新建js>update.js

2.修改content.js，把update.js注入到当前页面

3.运行yarn dev，会发现背景色并没有修改成功，F12控制台报错，这个报错说明未找到文件，这是因为WXT未把update.js打包到项目中

4.修改modules>updateManifest.js

5.运行yarn dev，访问百度，会发现背景已经设置为红色

6.修改update.js，增加console.log代码，查看控制台会发现代码并没有生效，那是因为WXT虽然热更新，但是update.js是静态资源，只是作为文件注入到网页中，WXT监听不到文件的变化

7.静态资源热更新的问题。要解决该问题需要安装chokidar插件，监听文件，但是不能写在modules>updateManifest.js，WXT的模块只要在服务更新、项目构建时才会生效，如果只写在updateManifest.js中虽然可以把修改后的文件重新打包，但是却不能达到热更新的效果，要达到热更新的效果，需要写个vite的插件，通过server的worket发送消息给客户端才能达到热更新的效果

8.打包好的update.js还有个问题就是代码安全问题，如果需要代码安全就要需要再写个vite插件，通过gulp、gulp-javascript-obfuscator配置混肴js

9.gulp-javascript-obfuscator混淆配置

复制代码

{
    compact: true, // 压缩代码，删除换行符
    controlFlowFlattening: true, // 控制流扁平化，增加代码复杂度
    controlFlowFlatteningThreshold: 1, // 控制流扁平化应用的概率
    deadCodeInjection: true, // 注入死代码
    deadCodeInjectionThreshold: 1, // 死代码注入的概率
    debugProtection: true, // 启用调试保护
    debugProtectionInterval: 4000, // 调试保护间隔时间
    disableConsoleOutput: true, // 禁用控制台输出
    identifierNamesGenerator: 'hexadecimal', // 使用十六进制生成标识符名称，mangled使用简单的变量名混淆
    log: false, // 禁用日志输出
    numbersToExpressions: true, // 将数字转换为表达式
    renameGlobals: false, // 不重命名全局变量
    reservedNames: ['window', 'document', 'console'], // 保留指定的全局变量
    selfDefending: true, // 启用自防御功能
    simplify: true, // 简化代码
    splitStrings: true, // 分割字符串
    splitStringsChunkLength: 5, // 字符串分割的块长度
    stringArray: true, // 启用字符串数组
    stringArrayCallsTransform: true, // 转换字符串数组调用
    stringArrayEncoding: ['rc4'], // 使用rc4编码字符串数组
    stringArrayIndexShift: true, // 启用字符串数组索引偏移
    stringArrayRotate: true, // 旋转字符串数组
    stringArrayShuffle: true, // 打乱字符串数组
    stringArrayWrappersCount: 5, // 字符串数组包装器数量
    stringArrayWrappersChainedCalls: true, // 启用字符串数组包装器链式调用
    stringArrayWrappersParametersMaxCount: 5, // 字符串数组包装器参数最大数量
    stringArrayWrappersType: 'function', // 字符串数组包装器类型
    stringArrayThreshold: 1, // 字符串数组应用的概率
    transformObjectKeys: true, // 转换对象键
    unicodeEscapeSequence: false // 禁用Unicode转义序列。
}