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

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