杭州做网站外包公司,郑州房产网,安徽省校园网站建设,企业通讯软件appWXTVue3sassantdvite搭建项目开发chrome插件 前言一、初始化项目二、项目配置调整三、options页面配置四、集成antd五、集成sass六、环境配置七、代码注入 vue3#xff1a;https://cn.vuejs.org/ axios#xff1a;https://www.axios-http.cn/docs/api_intro antd#xff1a;… WXTVue3sassantdvite搭建项目开发chrome插件 前言一、初始化项目二、项目配置调整三、options页面配置四、集成antd五、集成sass六、环境配置七、代码注入 vue3https://cn.vuejs.org/ axioshttps://www.axios-http.cn/docs/api_intro antdhttps://www.antdv.com/components/config-provider-cn sasshttps://blog.csdn.net/randy521520/article/details/131242242 WXThttps://wxt.dev/ gulp-javascript-obfuscatorhttps://github.com/javascript-obfuscator/gulp-javascript-obfuscator 谷歌插件参考文档https://developer.chrome.google.cn/docs/extensions/reference/api?hllv
前言
WXT的前身是vite-plugin-web-extensionvite-plugin-web-extension目前已经不再开发只做维护文章中静态js打包、静态js热更新、静态js混淆只是大概将了以下方法。不想费事的道友可通过此文章中的链接下载https://blog.csdn.net/randy521520/article/details/146998467
一、初始化项目
1.cmd打开终端工具运行npx wxtlatest init
yarnnpx wxtlatest init
npmnpx wxtlatest init
pnpmpnpm dlx wxtlatest init
bunbunx wxtlatest init2.输入项目名称键盘方向键选择vue 3.键盘方向键选择选择包管理器 4.项目创建成功 5.开发者工具打开项目打开开发者工具的终端运行yarn install安装package.json中的依赖包安装成功后运行 6.安装成功后运行yarn dev在打开的浏览器中加载打包好的扩展程序 7.打开百度固定扩展程序点击扩展程序出现WXTVue的标识说明项目已经初步搭建成功 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标题在根目录新建modulesupdateManifest.js该文件不用引用当构建项目时WXT会自己调用该模块 4.修改icon只需要生成对应icon文件中的icon大小替换就行访问https://www.bejson.com/ui/imagehandler/可把icon转成任何尺寸
三、options页面配置
1.在entrypoints目录新建options文件夹把popup中的文件复制到options文件夹修改optionsapp.vue 2.修改popupapp.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中新建scssglobal.scss、scssglobalMixin.scss、scssglobalVar.scss、scssiframe.scssglobal.scss用于通用的样式、globalMixin.scss用于Mixin通用的样式、globalVar.scss用于全局变量、iframe.scss用于导出scss文件修改wxt.config.js将iframe.scss文件引入到项目中 3.修改global.scss、globalMixin.scss、globalVar.scssglobalVar.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_urlsmatches使用来匹配域名的匹配上的域名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下新建jsupdate.js 2.修改content.js把update.js注入到当前页面 3.运行yarn dev会发现背景色并没有修改成功F12控制台报错这个报错说明未找到文件这是因为WXT未把update.js打包到项目中 4.修改modulesupdateManifest.js 5.运行yarn dev访问百度会发现背景已经设置为红色 6.修改update.js增加console.log代码查看控制台会发现代码并没有生效那是因为WXT虽然热更新但是update.js是静态资源只是作为文件注入到网页中WXT监听不到文件的变化 7.静态资源热更新的问题。要解决该问题需要安装chokidar插件监听文件但是不能写在modulesupdateManifest.jsWXT的模块只要在服务更新、项目构建时才会生效如果只写在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转义序列。
}
