你好！欢迎来到 Chrome 插件开发的奇妙世界。这篇文档是专门为你准备的 。即使你的基础薄弱，也不用担心。我们将把这个项目拆解成生活中的例子，带你一步步理解它的核心原理 and 开发流程。

// . 创建字幕容器并注入到别人网页的 body 中let container = document.createElement;document.body.appendChild;// . 核心：附加 Shadow DOMconst shadowRoot = container.attachShadow;const shadowContainer = document.createElement;shadowRoot.appendChild;// . 使用 React 监听消息并渲染 UIconst SubtitleOverlay = => { const = useState; useEffect => { // 监听来自 Background 的字幕geng新消息 chrome.runtime.onMessage.addListener => { if { // geng新 React 状态，重新渲染字幕 setSentences); } }); }, ); return } </div> );};// . 把 React 组件渲染进 Shadow DOM 里createRoot.render;.

async function startCapture { // . 凭许可证 真正拿到音频流 const stream = await navigator.mediaDevices.getUserMedia; // . 建立音频加工厂 const audioContext = new AudioContext; // AI 需要 16kHz // 引入我们自己写的处理器，用来切碎音频 await audioContext.audioWorklet.addModule; const source = audioContext.createMediaStreamSource; const processor = new AudioWorkletNode; // . 连接 WebSocket const ws = new WebSocket; // . 每次音频被切碎，就发给服务器 processor.port.onmessage = => { const audioBuffer = event.data; // ... 进行 WAV 封装或 Base64 编码 ... ws.send; }; // 将音频流输入到加工厂 source.connect;}第四棒：AI吐出字幕，前线施工队渲染

业务流程WebSocket 收到 AI 返回的 JSON 字幕。Offscreen 把字幕发给 Background，Background 就像个邮局，精准地把字幕派发给当初那个被录音的标签页。Content Script 收到后在屏幕上画出来。