meta-glasses-api 黑科技解码DataTransfer 模拟文件上传向 Messenger 发送语音【免费下载链接】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 智能眼镜用户只需说一句Hey Meta, send a message to ChatGPT就能通过语音把消息、图片甚至视频画面交给 ChatGPT、Claude、Perplexity 等大模型处理并自动收到文字或语音回复。本文将深入拆解其中最黑科技的一环——用 DataTransfer 模拟文件上传把 AI 生成的语音自动发送到 Messenger让你彻底看懂这条语音魔法链路是怎么跑通的。一句话看懂meta-glasses-api 到底做了什么简单来说meta-glasses-api 做了三件事监听通过MutationObserver实时监听 Messenger 聊天窗口的新消息思考把收到的消息转发给后台脚本调用你配置的 AI 提供商生成回复回复把 AI 的回复伪装成你亲手打出来的消息发回聊天还能顺便把回复转成语音发过去。它之所以能骗过 Messenger靠的全是一套精巧的前端模拟技巧其中最核心的就是DataTransfer模拟文件上传。黑科技核心DataTransfer 是怎么模拟文件上传的在浏览器里网页通常不允许脚本直接给input typefile赋值文件。但DataTransfer对象提供了程序化构造文件列表的能力先把文件塞进dataTransfer.items再把dataTransfer.files整体赋给文件输入框最后派发一个change事件——网页就会认为用户真的选了一个文件。meta-glasses-api 正是利用这个机制把 AI 生成的语音喂给 Messenger 的附件上传框。核心代码位于 conversion-screen-view.tsx 的attachAudio函数流程如下第一步把 base64 音频还原成二进制后台返回的语音是一串 base64 字符串。脚本先用atob解码成二进制字节再包装成Blob和File对象const blob new Blob([bytes], { type: audio/mpeg }); const file new File([blob], audio.mp3, { type: audio/mpeg });第二步用 DataTransfer 偷梁换柱接下来就是重头戏——创建DataTransfer把音频文件塞进去再整体赋给页面上的文件输入框const dataTransfer new DataTransfer(); dataTransfer.items.add(file); fileInput.files dataTransfer.files;第三步派发 change 事件骗过页面最后派发一个可冒泡的change事件让 Messenger 误以为用户手动选择了音频文件从而触发上传逻辑const event new Event(change, { bubbles: true }); fileInput.dispatchEvent(event);整个过程只用了十几行代码却精准绕过了脚本不能操作文件输入框的限制堪称前端黑科技的教科书级示范。从嘿 Meta到语音回复完整链路拆解理解了 DataTransfer 模拟文件上传后再回头看整条链路就一目了然了。一次语音命令 → 语音回复的完整旅程是这样的1. 眼镜收到语音Messenger 收到文字你对 Meta 智能眼镜说Hey Meta, send a message to ChatGPT眼镜会把这句话转成文字发到指定的 Messenger 群聊。2. 内容脚本捕获新消息扩展的内容脚本src/app/content/index.tsx常驻在 Messenger 页面里用MutationObserver盯着聊天区域的 DOM。一旦检测到新消息气泡出现就提取文字或图片const newChatObserver new MutationObserver((mutations) { ... });3. 后台脚本调用 AI 大模型内容脚本通过消息通道src/lib/messaging.ts把请求发给后台脚本src/app/background/index.ts后台再调用 AI SDKsrc/lib/ai.ts生成回复。支持的提供商相当全面类型提供商对话/视觉OpenAI、Anthropic、Perplexity、Google、DeepSeek、xAI语音合成 TTSOpenAI、ElevenLabs、Minimax4. 文本回复模拟打字 模拟回车AI 回复文本后脚本用innerHTML把文字写进消息输入框派发InputEvent模拟输入再派发一个Enter键的KeyboardEvent触发发送——整个过程跟你亲手打字回车几乎无差别。5. 语音回复DataTransfer 模拟文件上传如果开启了 Use TTS 开关后台会把 AI 回复文本交给 TTS 服务生成语音如 OpenAI TTS、ElevenLabs 或 Minimax返回 base64 音频再由前面讲的attachAudio用DataTransfer 模拟文件上传把音频发进聊天框。下图就是一次真实的语音回复效果——AI 不仅回答了问题还附带了一条 0:13 的语音消息图片消息与视频监控同一套架构的延伸这套监听 → 调 AI → 模拟发送的架构还不止能处理文字和语音。图片识别当你在聊天里发送一张照片比如午餐脚本会提取图片 URL 发给后台由多模态模型如 GPT-4.1描述图片内容并回复见 conversion-screen-view.tsx 的sendReceivedImageToServer函数视频监控在视频通话界面扩展还能用captureStreamImageCapture定时截取当前画面把截图交给 AI 分析并记录日志call-screen-view.tsx如何快速上手体验想亲自体验这条语音魔法链路只需几步克隆仓库git clone https://gitcode.com/gh_mirrors/me/meta-glasses-api安装依赖并运行在项目根目录执行bun install然后bun run dev:chrome支持 Chrome、Brave、Firefox配置 API Key在扩展的 AI Settings 面板里填入你选择的 AI 提供商密钥并选择模型让小号盯着聊天用备用 Facebook 账号打开群聊点击 Start Monitoring Chat然后就可以对着智能眼镜下命令了。小提示为了让眼镜认识你的群聊需要先创建一个三人群、移除一人、改名、换头像并在 Meta View 应用里断开重连 Messenger 账号让眼镜同步到最新的聊天列表。结语meta-glasses-api 最迷人的地方在于它没有动用任何官方 SDK全靠浏览器扩展的 DOM 操作和事件模拟就把Meta 眼镜 AI 大模型 Messenger串成了一条完整的语音链路。其中DataTransfer 模拟文件上传这个细节更是把前端黑科技发挥到了极致——十几行代码就让 AI 生成的语音以假乱真地出现在聊天框里。如果你对浏览器扩展、DOM 模拟输入这类技巧感兴趣这份开源代码尤其是 src/app/content/conversion-screen-view.tsx绝对值得通读一遍里面还有更多值得玩味的实现细节等你发掘。【免费下载链接】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），仅供参考
