meta-glasses-api 技术架构全解析：WXT + React 19 + AI SDK 的现代浏览器扩展栈
meta-glasses-api 技术架构全解析WXT React 19 AI SDK 的现代浏览器扩展栈【免费下载链接】meta-glasses-apiHey Meta send a message to ChatGPT Mai: A Hacky Messenger browser extension pseudo API for the Meta Glasses :eyeglasses:项目地址: https://gitcode.com/gh_mirrors/me/meta-glasses-apimeta-glasses-api项目代号 Mai是一个开源的现代浏览器扩展它的核心功能是给 Messenger 注入自定义 AI 机器人让 Meta Ray-Ban 智能眼镜或独立 Messenger 应用通过语音指令Hey Meta send a message to ChatGPT就能把消息转发给 ChatGPT、Claude、Perplexity 等大模型并收到回复。本文将带你完整解析 meta-glasses-api 的技术架构从 WXT 构建框架、React 19 界面层到 AI SDK 多模型接入与扩展消息通信机制一起看懂这个眼镜 × AI × 浏览器扩展的精彩实现。meta-glasses-api 是什么给 Meta 眼镜装上 AI 大脑meta-glasses-api 的定位很巧妙它不依赖 Meta 官方的 SDK而是用浏览器扩展在 Messenger 页面中伪装一个群聊机器人。你只需创建一个只有两个账号的群聊把群名改成ChatGPT之类的名字戴上 Meta 眼镜说一句Hey Meta给 ChatGPT 发消息扩展就会自动接管这条消息文本问答把语音转成的文字消息发给选定的 AI 大模型再把回复自动发回群聊图像理解发送照片给 GPT-4.1 等多模态模型获得图片描述语音回复开启 TTS 后AI 的回答会生成一段语音消息发回给你视频监控在视频通话中定时截图并交给 AI 分析结果实时写入日志面板。现代浏览器扩展技术栈一览meta-glasses-api 的技术栈非常新几乎踩中了前端领域当前最主流的技术选型层级技术选型作用构建框架WXT 0.20 Vite统一构建 Chrome / Firefox / Brave 扩展UI 框架React 19 React DOM渲染扩展弹窗与页面内 UI样式方案Tailwind CSS 4 shadcn/ui 风格组件快速搭建深色主题界面AI 能力Vercel AI SDKai 4.x统一接入多家大模型与 TTS 服务状态管理Zustand TanStack Query管理设置、会话与 API Key通信层webext-core/messaging类型安全的消息收发数据持久化WXT Storage基于浏览器 storage保存日志、设置与密钥工程化TypeScript 5.8 Biome Bun类型检查、Lint 与依赖管理WXT新一代浏览器扩展构建框架整个项目的骨架由 WXT 定义配置集中在 wxt.config.ts入口目录指向src/app输出目录为build并启用了wxt-dev/module-react与wxt-dev/auto-icons两个官方模块底层直接复用 Vite 的插件生态Tailwind、SVGR 都挂载在这里。WXT 最省心的一点是按入口自动识别扩展角色——src/app下的background、content、popup目录会被自动编译成 Service Worker、内容脚本和弹窗页面开发者几乎不用手写manifest.json的复杂配置跨浏览器构建Chrome、Firefox、Brave也只需一条命令切换。三层架构background / content / popup 如何协同meta-glasses-api 遵循了浏览器扩展最经典的三层职责划分Background Service Workersrc/app/background/index.ts—— 大脑。负责接收各类 AI 请求、调用大模型 API、管理日志写入安装扩展时自动打开 popup 引导配置Content Scriptsrc/app/content/index.tsx—— 触手。通过createShadowRootUi把 React 应用挂载进 Messenger 页面用 MutationObserver 监听新消息、用 DOM 操作模拟输入和发送Popupsrc/app/popup/main.tsx—— 控制台。提供 API Key 配置、日志查看等管理功能。三者之间通过类型安全的消息协议通信。消息定义集中在 src/lib/messaging.ts包括AI_CHAT、AI_TTS、AI_VISION、ADD_LOG等事件配合defineExtensionMessaging泛型约束调用方与接收方的参数类型在编译期就能互相校验彻底告别字符串消息满天飞的传统写法。React 19 Tailwind CSS 打造扩展界面React 19 搭配 Tailwind CSS 4 构成了扩展的全部界面popup 弹窗采用深色主题包含 API Keys 设置页和带搜索、筛选功能的日志页content script 则在 Messenger 页面右下角注入悬浮控制条提供开始/停止监控、显示/隐藏侧栏、切换 Mai UI 等按钮。组件层大量复用了 shadcn/ui 风格的组件Button、Card、DropdownMenu、Tooltip 等位于 src/components/ui配合sonner做轻量通知整个界面风格统一、开发效率极高。AI SDK 统一接入多家大模型AI 能力是 meta-glasses-api 的灵魂全部封装在 src/lib/ai.ts 中基于 Vercel AI SDK 实现。createAiProvider函数通过工厂模式根据设置中的 provider 创建对应客户端实例目前支持文本生成generateAiTextOpenAI、Anthropic、Perplexity、Google Gemini、DeepSeek、xAI图像理解aiVisionRequest把图片转 base64 后走多模态消息让模型详细描述这张图片语音合成aiTtsRequest支持 OpenAI TTS、ElevenLabs、MiniMax 三家服务音频统一转成 base64 再回传。模型清单集中维护在 src/lib/constants.ts 的providerToModels与providerToTTSModels中想加新模型只需改配置、不动逻辑扩展性极佳。监听 Messenger 聊天MutationObserver 实战content script 中最硬核的部分在 src/app/content/conversion-screen-view.tsx。扩展通过MutationObserver监听对话区域 DOM 的变化一旦检测到新增的div.html-div节点就提取其中的文本或图片链接判断是不是自己发出的消息通过data-processed标记去重然后触发对应的 AI 请求收到回复后再通过模拟InputEvent和 Enter 键盘事件把 AI 的回答敲进输入框并自动发送。这段代码展现了浏览器扩展操纵真实网页的经典思路观察 DOM → 提取数据 → 异步处理 → 模拟交互也是新手学习网页自动化交互的最佳参考。数据持久化与状态管理扩展的运行状态被清晰地拆成两部分跨页面持久数据走 WXT Storagesrc/lib/storage.ts包括 API Keys、设置项模型、TTS 开关、截图质量、监控间隔等和运行日志均提供默认值兜底内存态数据如当前监控会话、MutationObserver 实例则由 Zustand 管理的session.store与settings.store承载配合 React Hooks 实现页面内响应式更新。快速上手从克隆到跑通完整链路想亲自体验这套技术架构只需要三步克隆仓库git clone https://gitcode.com/gh_mirrors/me/meta-glasses-api安装依赖并启动开发模式bun install后运行bun run dev:chromeFirefox 用dev:firefoxWXT 会自动构建并打开浏览器加载扩展在 popup 中填入任意一家大模型的 API Key登录备用 Facebook 账号进入facebook.com/messages/t创建一个两人群聊并重命名为 AI 名字点击Start Monitoring Chat即可开始对话。整个流程零配置、开箱即用非常适合想学习 WXT React 19 AI SDK 组合开发浏览器扩展的开发者作为实战范本。总结meta-glasses-api 用不到十行的核心调度代码把智能眼镜、Messenger 和多家大模型串成了一条完整链路其架构设计堪称现代浏览器扩展的教科书WXT 负责构建工程化React 19 提供组件化 UIAI SDK 抹平多模型差异webext-core/messaging保证类型安全的进程通信。无论你是想给 Meta 眼镜加一个 AI 助手还是想研究 2025 年浏览器扩展的最佳实践这份源码都值得仔细阅读。【免费下载链接】meta-glasses-apiHey Meta send a message to ChatGPT Mai: A Hacky Messenger browser extension pseudo API for the Meta Glasses :eyeglasses:项目地址: https://gitcode.com/gh_mirrors/me/meta-glasses-api创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
