Build a Chrome Side Panel That AI-Translates English Pages to Markdown
Chrome's side panel API remains underused compared to popups, yet it solves the cramped-UI problem that makes many translation extensions unpleasant. This scaffold shows how to wire it with Manifest V3, strongly-typed cross-context messaging, and streaming AI output — a stack that transfers directly to summarizers, explainers, or any tool that processes page content through an LLM.
The extension uses a side panel rather than a popup, giving the translated output room to breathe. Four config files and thirteen source files form the skeleton: a content script clones and sanitizes the DOM before converting it to Markdown via Mozilla's Readability and Turndown, a background service worker orchestrates extraction and calls the AI API with SSE streaming, and a React panel renders the result with a typewriter effect. The messaging layer is fully typed so that protocol mismatches between the three contexts break at compile time.
API Key handling stays strictly in the background worker; the content script never touches it. The translation pipeline is provider-agnostic — swapping base URL, key, and model in the settings panel switches between DeepSeek, Qwen, GLM, or any OpenAI-compatible endpoint without code changes.
The guide is deliberately mechanics-only: it lists every file, its responsibility, and the exact configs to copy-paste, then leaves the logic implementation to the reader based on the annotated structure.
Treating the extension's three execution contexts (background, content script, side panel) as a distributed system with a typed message contract is the architectural move that prevents most silent runtime bugs.
The guide deliberately omits code for the 13 logic files and instead annotates their responsibilities — this forces the builder to engage with the structure rather than copy-pasting blindly, which is unusual for a "newbie-oriented" tutorial and likely intentional.
Using `@crxjs/vite-plugin` to bundle a Manifest V3 extension with React and TypeScript is still a relatively niche toolchain choice; the scaffold demonstrates it works but the plugin's long-term maintenance is a dependency risk worth noting.