type
status
date
slug
summary
tags
category
icon
password
在之前发布的两篇文章中，我向大家推荐了几款密码管理工具，并且分享了我使用 Trae 开发的 uTools插件-密码管家 的经历。
在日常使用插件的过程中，每次登录不同账户时，我都不得不一次次重复复制粘贴的动作。在这一过程中，我意识到一个极为关键的功能缺失——账户密码的自动填充。
初版自动填充
鉴于密码管家是一款 uTools 插件，我们优先选用 uTools 可编程浏览器来实现页面跳转，并注入自动填充帐号密码 JavaScript 代码，来达成自动填充账号密码的功能。
自动填充 JavaScript 代码的核心逻辑非常简单明了：
然而在实际应用中，会遇到许多边界情况需要处理。例如：某些邮箱登录页面采用 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 安装：
安装完成后，可以通过以下示例代码连接到 Chrome 的远程调试端口并导航到一个页面：
自动填充场景中的运用chrome-remote-interface
无需逐行审查代码，先利用 Trae 绘制时序图，直观展现自动填充流程。根据绘制的时序图，进一步完善具体代码实现，如下图所示。
触发自动填充功能后，密码管家优先尝试打开本地浏览器（如 Edge 或 Google Chrome）。如果成功打开，自动填充代码将在本地浏览器中执行；若未能成功启动本地浏览器，则使用 uTools 自身集成的浏览器来完成自动填充任务。如下图所示：
这样，一个自动填充的功能就开发好了。
最后
Loading...
