2026-第三周

该周报主要为各个地方内容的汇总整理

技术

620 - “Agent Browser”

本文介绍了 Agent Browser 这一由 Vercel Labs 开发的 AI 浏览器自动化工具。它通过生成页面的可访问性树并为元素提供唯一引用，使 AI 能够精准控制浏览器操作。文章详细说明了其安装、基本工作流、如何连接本地 Chrome 以利用登录状态、内置 Skills 功能以及如何结合 undetected_chromedriver 绕过网站自动化检测，适用于多种网页自动化场景。

• 🚀 工具介绍：Agent Browser 是 Vercel Labs 开发的 Rust 构建的 CLI 工具，专为 AI Agent 设计，通过输出页面的可访问性树和元素唯一引用，让 AI 能准确控制浏览器交互。
• ⚙️ 快速上手：安装后可通过 open 命令打开网页并生成快照，使用 click 或 fill 等指令与页面元素交互，每个元素都有类似 @e2 的唯一标识。
• 🔗 连接本地 Chrome：支持通过 Chrome DevTools Protocol 连接已运行的浏览器实例，利用现有登录状态（如 Cookie、账号信息），实现更实用的自动化操作（如发推、管理 GitHub）。
• 🛠️ Skills 功能：提供预置 Skills，可与 AI 结合自动执行复杂任务，例如获取并总结 Hacker News 上 AI 相关的内容，或操作 Gmail 发送邮件。
• 🕵️ 绕过检测：可接入 undetected_chromedriver 启动带调试端口的 Chrome，避免被网站识别为自动化工具，适用于反爬虫、自动注册等灰色地带场景。

Browser Extension Dev - 03. 注入 UI

本文详细介绍了如何使用 WXT 框架、React、Tailwind CSS 和 shadcn 组件库，在 YouTube 页面中注入一个复杂的 UI 扩展，以实现视频截图功能。文章通过一个具体的“YouTube 视频截图扩展”示例，逐步讲解了如何解决样式冲突、框架注入、图标嵌入、视频帧捕获、图片复制到剪贴板以及自动下载等关键问题。

• 🎯 项目目标：创建一个 YouTube 视频截图扩展，将图标注入视频播放器工具栏，点击后可截取当前视频帧、复制到剪贴板并自动下载。
• 🛠️ 技术栈与初始化：使用 WXT 初始化 React 模板项目，并配置 Tailwind CSS 和 shadcn 组件库，手动完成相关依赖安装和配置。
• 🎨 样式隔离方案：通过 Shadow DOM 模式注入 UI，有效隔离扩展样式与网页样式，避免了 Tailwind CSS 可能引发的样式冲突。
• ⚛️ 框架注入原理：React 等现代前端框架在构建时会被打包到 Content Script 中，随脚本一同注入页面，因此可以在扩展中使用任意 JavaScript 框架。
• 🔧 图标注入与资源访问：通过定位 YouTube 播放器工具栏的特定容器元素，将自定义按钮注入其中，并需在 manifest 中配置 web_accessible_resources 以允许网页访问扩展图标资源。
• 📸 截图功能实现：利用 Canvas API 的 drawImage 方法捕获视频当前帧，生成图片 Blob。
• 📋 复制与下载功能：使用 Clipboard API 将图片 Blob 复制到剪贴板，并借助 file-saver 和 dayjs 库实现带时间戳的文件自动下载。
• ⚠️ 注意事项与局限：文中提及了未处理的边缘情况，如视频未播放、广告处理、异常捕获等，但核心流程已完整实现。

工具

ai-elements

AI Elements 是一个基于 shadcn/ui 构建的组件库，旨在帮助开发者快速构建 AI 原生应用。它提供了一系列专为 AI 应用设计的可定制 React 组件，并支持通过 CLI 工具轻松集成到 Next.js 项目中。

• 🧩 组件库定位：基于 shadcn/ui 的 AI 原生应用组件库，提供对话、消息、代码块、推理展示等预制组件。
• ⚙️ 安装方式：可通过 npx ai-elements@latest 直接安装，或使用 shadcn CLI 添加特定组件。
• 📋 前提条件：需要 Node.js 18+、已安装 AI SDK 的 Next.js 项目、已初始化的 shadcn/ui 以及配置为 CSS 变量模式的 Tailwind CSS。
• 🧠 组件功能：包含聊天机器人、代码块、推理展示、工作流可视化等 20 多个组件，覆盖 AI 应用常见交互场景。
• 🚀 快速使用：安装后可直接在 React 应用中调用组件，并支持与 AI SDK 的 useChat 等钩子集成。
• 🔧 定制化支持：组件将安装到本地代码库中，允许开发者完全自定义样式和逻辑。
• 🌐 推荐配置：建议搭配 Vercel AI Gateway 和 CSS 变量模式使用，以获得最佳体验。

更新

设计

AI

其他