一、簡述
今天向大家介紹一款可以將build打包后的chrome擴展程序自動化加載到chrome瀏覽器中的webpack插件，該webpack插件是我自己開發(fā)的，已經(jīng)發(fā)布到了npm上，安裝方式如下：
npm i auto-load-chrome-ext-webpack-plugin
二、解決的痛點
前段時間在研究chrome插件開發(fā)過程中，由于我項目中使用了react進行頁面開發(fā)，使用webpack打包項目，打包后每次要手動去打開瀏覽器，然后手動選擇剛才打包后的chrome插件進行加載，這個過程有點繁瑣，所以開發(fā)了這款webpack插件來進行自動化加載，我們只需要執(zhí)行npm run build，打包后的操作就可以交給該插件自動完成，然后我們就可以直接在瀏覽器上愉快的調(diào)試插件項目了。想要了解更多關(guān)于chrome插件開發(fā)，可以看我的另一篇文章，基于manifest v3+react開發(fā)的Chrome插件demo。
三、該插件的實現(xiàn)原理
該插件使用了selenium-webdriver自動化測試工具以及一個自動化腳本autoClickSelect.exe文件。首先插件監(jiān)聽webpack的done這個鉤子函數(shù)，在webpack打包完成生成了build文件夾后去執(zhí)行，selenium-webdriver會打開chrome的擴展程序管理頁，然后自動化點擊右上角開發(fā)者模式的開關(guān)按鈕，打開開發(fā)者模式，然后自動化點擊加載擴展程序的按鈕，會彈出一個選擇文件夾的窗口，因為這個窗口是屬于操作系統(tǒng)的而非瀏覽器，所以使用selenium-webdriver自動化測試工具就沒辦法操作了，就要借助autoClickSelect.exe程序去幫我們完成后續(xù)的操作，在webpack插件中先執(zhí)行autoClickSelect.exe程序，autoClickSelect.exe程序會等待一分鐘，然后在webpack插件中緊接著執(zhí)行打開選擇文件夾窗口，autoClickSelect.exe程序監(jiān)聽到之后就會執(zhí)行后續(xù)的操作，它首先將輸入焦點定位到輸入文本框中，然后自動化輸入要選擇的chrome插件所在文件夾的絕對路徑，最后自動化點擊確定按鈕，整個過程就算是完成了。
四、使用方法及注意事項
插件中使用了selenium-webdriver自動化測試工具，要先下載對應(yīng)chrome瀏覽器版本的chromedriver.exe文件 (點擊這里下載)，64位windows系統(tǒng)也選擇 chromedriver_win32.zip 進行下載，下載解壓后將該文件放到chrome瀏覽器的安裝位置，例如C:/Program Files/Google/Chrome/application文件夾，如果后面升級了chrome版本，一定要記得去更換對應(yīng)版本的chromedriver.exe文件。
該webpack插件中使用到了autoClickSelect.exe文件，可以到我的github上下載，https://github.com/hepengwei/chrome-extension-react-demo，autoClickSelect.exe文件就在項目根目錄的config文件夾中，插件的使用方式也可以參考我那個demo項目，該插件需要傳三個參數(shù)，示例如下：
const AutoLoadChromeExtPlugin = require("auto-load-chrome-ext-webpack-plugin");
plugins: [
isEnvProduction && new AutoLoadChromeExtPlugin({
targetDir: "C:\\Users\\XXX\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions\\myChromeExtension",
autoClickSelectLocation:
"D:\\myProject\\chrome-extension-react-demo\\config\\autoClickSelect.exe",
chromedriverLocation: "C:\\Program Files\\Google\\Chrome\\Application\\chromedriver.exe",
}),
]
- targetDir 是你本地chrome瀏覽器存放插件位置的絕對路徑，先到Extensions文件夾下創(chuàng)建一個myChromeExtension文件夾，然后將XXX改為你本地的真實用戶名即可。
- autoClickSelectLocation 是autoClickSelect.exe文件所在的絕對路徑。
- chromedriverLocation 是chromedriver.exe文件所在的絕對路徑，默認為C:\Program Files\Google\Chrome\Application\chromedriver.exe，如果位置與之一致，可以不傳該參數(shù)。
- 最新的1.0.2版本新增了自動化固定擴展程序并打開popup頁的功能，該功能要使用當(dāng)前最新的autoClickSelect.exe文件才能正常使用。
更多個人文章
