一、简述
今天向大家介绍一款可以将build打包后的chrome扩展程序自动化加载到chrome浏览器中的webpack插件，该webpack插件是我自己开发的，已经发布到了npm上，安装方式如下：
npm i auto-load-chrome-ext-webpack-plugin
二、解决的痛点
前段时间在研究chrome插件开发过程中，由于我项目中使用了react进行页面开发，使用webpack打包项目，打包后每次要手动去打开浏览器，然后手动选择刚才打包后的chrome插件进行加载，这个过程有点繁琐，所以开发了这款webpack插件来进行自动化加载，我们只需要执行npm run build，打包后的操作就可以交给该插件自动完成，然后我们就可以直接在浏览器上愉快的调试插件项目了。想要了解更多关于chrome插件开发，可以看我的另一篇文章，基于manifest v3+react开发的Chrome插件demo。
三、该插件的实现原理
该插件使用了selenium-webdriver自动化测试工具以及一个自动化脚本autoClickSelect.exe文件。首先插件监听webpack的done这个钩子函数，在webpack打包完成生成了build文件夹后去执行，selenium-webdriver会打开chrome的扩展程序管理页，然后自动化点击右上角开发者模式的开关按钮，打开开发者模式，然后自动化点击加载扩展程序的按钮，会弹出一个选择文件夹的窗口，因为这个窗口是属于操作系统的而非浏览器，所以使用selenium-webdriver自动化测试工具就没办法操作了，就要借助autoClickSelect.exe程序去帮我们完成后续的操作，在webpack插件中先执行autoClickSelect.exe程序，autoClickSelect.exe程序会等待一分钟，然后在webpack插件中紧接着执行打开选择文件夹窗口，autoClickSelect.exe程序监听到之后就会执行后续的操作，它首先将输入焦点定位到输入文本框中，然后自动化输入要选择的chrome插件所在文件夹的绝对路径，最后自动化点击确定按钮，整个过程就算是完成了。
四、使用方法及注意事项
插件中使用了selenium-webdriver自动化测试工具，要先下载对应chrome浏览器版本的chromedriver.exe文件 (点击这里下载)，64位windows系统也选择 chromedriver_win32.zip 进行下载，下载解压后将该文件放到chrome浏览器的安装位置，例如C:/Program Files/Google/Chrome/application文件夹，如果后面升级了chrome版本，一定要记得去更换对应版本的chromedriver.exe文件。
该webpack插件中使用到了autoClickSelect.exe文件，可以到我的github上下载，https://github.com/hepengwei/chrome-extension-react-demo，autoClickSelect.exe文件就在项目根目录的config文件夹中，插件的使用方式也可以参考我那个demo项目，该插件需要传三个参数，示例如下：
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文件夹下创建一个myChromeExtension文件夹，然后将XXX改为你本地的真实用户名即可。
- autoClickSelectLocation 是autoClickSelect.exe文件所在的绝对路径。
- chromedriverLocation 是chromedriver.exe文件所在的绝对路径，默认为C:\Program Files\Google\Chrome\Application\chromedriver.exe，如果位置与之一致，可以不传该参数。
- 最新的1.0.2版本新增了自动化固定扩展程序并打开popup页的功能，该功能要使用当前最新的autoClickSelect.exe文件才能正常使用。
更多个人文章
