自动化Chrome插件打包与加载的Webpack插件详解

时间：11-08 名人轶事提交错误

大家好，感谢邀请，今天来为大家分享一下自动化Chrome插件打包与加载的Webpack插件详解的问题，以及和的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

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");