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 的优势,实现了一个高效的自动填充账号密码功能。

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

相关推荐
夏梦春蝉1 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W4 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏5 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
IT_10246 小时前
Spring Boot项目开发实战销售管理系统——系统设计!
大数据·spring boot·后端
weixin-a153003083166 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html