vue3：https://cn.vuejs.org/
axios：https://www.axios-http.cn/docs/api_intro
antd：https://www.antdv.com/components/config-provider-cn
sass：https://blog.csdn.net/randy521520/article/details/131242242
WXT：https://wxt.dev/
gulp-javascript-obfuscator：https://github.com/javascript-obfuscator/gulp-javascript-obfuscator
谷歌插件參考文檔：https://developer.chrome.google.cn/docs/extensions/reference/api?hl=lv

前言

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轉義序列。
}