一款将打包后的Chrome插件自动化加载到浏览器的webpack插件

一、简述

今天向大家介绍一款可以将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插件所在文件夹的绝对路径，最后自动化点击确定按钮，整个过程就算是完成了。

四、使用方法及注意事项

1. 插件中使用了selenium-webdriver自动化测试工具，要先下载对应chrome浏览器版本的chromedriver.exe文件 (点击这里下载)，64位windows系统也选择 chromedriver_win32.zip 进行下载，下载解压后将该文件放到chrome浏览器的安装位置，例如C:/Program Files/Google/Chrome/application文件夹，如果后面升级了chrome版本，一定要记得去更换对应版本的chromedriver.exe文件。

2. 该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，如果位置与之一致，可以不传该参数。

3. 最新的1.0.2版本新增了自动化固定扩展程序并打开popup页的功能，该功能要使用当前最新的autoClickSelect.exe文件才能正常使用。

更多个人文章

1. 十分钟带你入门Chrome插件开发
2. 两个跨域页面进行跳转传参的终极方案
3. 深入理解Event Loop的运行机制
4. 全网最全Autoit3基础教程及实战案例
5. 面试秘籍之排序算法