一款将打包后的Chrome插件主动化加载到欣赏器的webpack插件

手机软件开发 · 2024-9-23 05:03:51

一、简述

本日向各人先容一款可以将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文件才华正常利用。

更多个人文章

非常钟带你入门Chrome插件开辟
两个跨域页面举行跳转传参的终极方案
深入明确Event Loop的运行机制
全网最全Autoit3底子教程及实战案例
口试秘籍之排序算法

一款将打包后的Chrome插件主动化加载到欣赏器的webpack插件

所属分类: 问答交流

新帖推荐: 30日

推荐作品