4.4K Star 的 chrome-remote-interface 竟有这样的神功,不用写浏览器插件轻松搞定账号密码自动化填充

在之前发布的两篇文章中,我向大家推荐了几款密码管理工具,并且分享了我使用 Trae 开发的 uTools插件-密码管家 的经历。

在日常使用插件的过程中,每次登录不同账户时,我都不得不一次次重复复制粘贴的动作。在这一过程中,我意识到一个极为关键的功能缺失------账户密码的自动填充。

开源地址:github.com/CatsAndMice...

uTools插件-密码管家:u.tools/plugins/det...

自动填充效果图:

初版自动填充

鉴于密码管家是一款 uTools 插件,我们优先选用 uTools 可编程浏览器来实现页面跳转,并注入自动填充帐号密码 JavaScript 代码,来达成自动填充账号密码的功能。

自动填充 JavaScript 代码的核心逻辑非常简单明了:

js 复制代码
const password =  document.querySelector('input[password]');
const username =  document.querySelector('input[username]');

password.value = 'xxx';
username.value = 'xxx';

然而在实际应用中,会遇到许多边界情况需要处理。例如:某些邮箱登录页面采用 iframe 内嵌形式,在这种情况下,直接使用 document.querySelector('input[password]') 无法获取到密码输入框等等情况。

不细说,自动填充JavaScript代码我是利用 Trae Ai 搞定的,我们只需将那些需要考虑的边界情况整理并提供给 Trae。

虽然最终的自动填充效果基本达到了预期,但 uTools 可编程浏览器的用户体验毫无人性化,使用起来非常不便。

最佳解决方案是直接打开用户本地浏览器进行填充。而 chrome-remote-interface 能帮助实现这一过程。

chrome-remote-interface是什么

Chrome Remote Interface (CRI) 是一个基于 Chrome DevTools Protocol 的开源库,提供与 Chrome 或 Chromium 浏览器的交互能力。它允许开发者通过 JavaScript 控制和自动化浏览器的各种操作,如浏览网页、执行 JavaScript、调试网络请求等。

Chrome Remote Interface 的主要特点和优势包括:

  • 轻量级:相比 Puppeteer,CRI 只包含核心功能,体积更小,启动更快。
  • 灵活性:可以选择连接本地或远程的 Chrome 实例,甚至可以是无头模式。
  • 低级访问:对 DevTools 协议的直接访问,让你能够实现一些高级自定义功能。
  • 社区支持:开源项目有活跃的社区和维护者,遇到问题时能得到及时的帮助。

安装和基本使用

要使用 Chrome Remote Interface,首先需要安装它。可以通过 npm 安装:

shell 复制代码
npm install chrome-remote-interface

安装完成后,可以通过以下示例代码连接到 Chrome 的远程调试端口并导航到一个页面:

js 复制代码
const CDP = require('chrome-remote-interface');

async function example() {
	let client;
	try {
		// 连接到端点
		client = await CDP();
		// 提取域
		const {Network, Page} = client;
		// 设置处理程序
		Network.requestWillBeSent((params) => {
			console.log(params.request.url);
		});
		// 启用事件并开始
		await Network.enable();
		await Page.enable();
		await Page.navigate({url: '<https://github.com>'});
		await Page.loadEventFired();
	} catch (err) {
		console.error(err);
	} finally {
		if (client) {
			await client.close();
		}
	}
}

example();

自动填充场景中运用chrome-remote-interface

不再一行行解读代码,利用 Trae 绘制时序图,直观展现自动填充流程。读者可以根据时序图去阅读源码,源码已经发布在Github,提示词如下图所示。

Trae 给出的结果过于复杂,人为对它给出的结果进行了部分修改,最后得到了我比较满意的图:

触发自动填充功能后,密码管家优先尝试打开本地浏览器(如 Edge 或 Google Chrome)。如果成功打开,自动填充代码将在本地浏览器中执行;若未能成功启动本地浏览器,则使用 uTools 自身集成的浏览器来完成自动填充任务。

这样,一个自动填充的功能就开发好了。

代码已开源:github.com/CatsAndMice...

最后

chrome-remote-interface 是一个基于 Chrome DevTools Protocol 的开源库,它允许开发者通过 JavaScript 操作浏览器,相较于 Puppeteer 等工具更加轻量级。在uTools插件-密码管家中,我们充分利用 chrome-remote-interface 的优势,实现了一个高效的自动填充账号密码功能。

欢迎大家给出不同的意见和建议

相关推荐
YGY Webgis糕手之路2 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
魔尔助理顾问2 小时前
系统整理Python的循环语句和常用方法
开发语言·后端·python
90后的晨仔2 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang2 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔3 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
程序视点3 小时前
Java BigDecimal详解:小数精确计算、使用方法与常见问题解决方案
java·后端
你的人类朋友3 小时前
❤️‍🔥微服务的拆分策略
后端·微服务·架构
德育处主任3 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴3 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔3 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js