{"post":{"slug":"how-to-build-chrome-extension-2026","title":"How to build a Chrome extension in 2026 (Manifest V3 done right)","excerpt":"Build a Chrome extension on Manifest V3 in 2026. The architecture, the gotchas, and how to ship without surprises.","category":"code","date":"January 29, 2026","author":"ByteLedger Team","content":"<span class=\"dropcap\">C</span>hrome extensions in 2026 are nothing like Chrome extensions in 2018. Manifest V3 reshaped the architecture, killed long-running background pages, and added a service-worker model that surprises you the first time it sleeps mid-execution. The tooling, fortunately, has caught up.\n\nThis guide is the working approach for shipping a Chrome extension today.\n\n## What changed in 2026\n\nManifest V2 is fully sunset. Manifest V3 is the only path.\n\n- **Service workers, not background pages.** They terminate aggressively. Persist state externally.\n- **Declarative net request replaces webRequest blocking.** Content blockers had to redesign.\n- **Side panels, action APIs, offscreen documents.** New surface area worth knowing.\n\n## How we picked the stack\n\nFive components every modern extension needs.\n\n- **A bundler that understands MV3** (wxt or vite-plugin-web-extension)\n- **TypeScript** (the API surface is huge)\n- **A persistent storage layer** (`chrome.storage.local` or IndexedDB)\n- **Message passing helpers** (typed wrappers save weeks)\n- **A test setup** (Playwright with extension loading)\n\n## 1. Use wxt or Plasmo as the framework\n\nThe two real frameworks for MV3 extensions in 2026 are wxt and Plasmo. Both handle the manifest, hot reload, framework integration (React/Vue/Svelte), and packaging. Trying to do MV3 with raw Webpack and a hand-written manifest is a slow tax with no upside.\n\nThe trade-off: an extra abstraction. Both frameworks are thin enough that you can eject if you ever need to.\n\n## 2. Design for service worker lifecycle\n\nThe single biggest source of MV3 bugs is treating the background service worker like a long-running process. It is not. Chrome may terminate it after 30 seconds of inactivity. Anything you store in module-level variables disappears when it sleeps.\n\nThe fix: persist any state you care about to `chrome.storage.local` or `chrome.storage.session`. Reload it at the top of each event handler. Use alarms (`chrome.alarms`) for periodic tasks, not `setInterval`.\n\n## 3. Content scripts, side panel, popup\n\nThree UI surfaces. Pick the right one.\n\n- **Popup** — small, transient UI from the toolbar icon.\n- **Side panel** — persistent UI in a panel. Better than popups for anything sustained.\n- **Content script** — code injected into a page. For modifying the actual web page.\n\n## Comparison: Chrome extension stacks in April 2026\n\n| Stack | Setup time | DX | Best for |\n| --- | --- | --- | --- |\n| wxt | Fast | Excellent | Default for new extensions |\n| Plasmo | Fast | Excellent | React-heavy extensions |\n| Vite + plugin | Medium | Good | Custom setups |\n| Raw MV3 | Slow | Painful | Learning the API only |\n\n## Common mistakes to avoid\n\n**Storing state in service worker memory.** It will be gone the next time you check. Use `chrome.storage`.\n\n**Asking for too many permissions.** Each permission widens the install warning and can get your extension blocked from the Chrome Web Store. Ask for the minimum, use optional permissions for the rest.\n\n**Skipping cross-browser testing.** Firefox and Edge support MV3 but with subtle differences. If you advertise multi-browser, test multi-browser.\n\n## FAQ\n\n**Can I share code between Chrome and Firefox extensions?**\nYes — wxt and Plasmo both target multiple browsers from one source. Some APIs differ; their abstractions handle most of it.\n\n**Do I need a developer account?**\nYes — $5 one-time fee for the Chrome Web Store. Be prepared for a 1–3 day review on first publish.\n\n**How do I add AI features to an extension?**\nEither bundle a small model with `chrome.ai` (Gemini Nano on supported devices) or call a remote API. Watch CSP rules carefully for the latter.\n\n## Where to go next\n\nFor related guides see [How to build a VS Code extension in 2026](/blog/how-to-build-vscode-extension-2026), [Best VPNs for restricted countries in 2026](/blog/best-vpns-for-restricted-countries-2026), and [AI privacy guide](/blog/ai-privacy-guide-protect-your-data).","hue":305,"metaTitle":"Build a Chrome Extension in 2026: Manifest V3 Guide","metaDescription":"Build a Chrome extension on Manifest V3 in 2026. Service workers, content scripts, storage, publishing — done right.","keywords":["chrome extension 2026","manifest v3 tutorial","chrome service worker","wxt framework","vite chrome extension","chrome extension typescript","chrome web store","browser extension development","mv3 migration","chrome extension boilerplate"],"tldr":["**Manifest V3 is the only option** — V2 is fully sunset and store submissions require V3.","**Service workers replace background pages** — they sleep, restart, and lose state. Design for that.","**Use a bundler from day one** — Vite or wxt make MV3 development sane.","**Skip:** copy-pasting old MV2 tutorials. They will silently mislead you."],"readTime":"3 min read","wordCount":623},"related":[{"slug":"how-to-build-a-chrome-extension-2026","title":"How to build a Chrome extension in 2026","excerpt":"Chrome extensions are more capable and more restricted than ever in 2026 with Manifest V3 fully enforced. This guide covers the architecture, permissions, and build tooling to ship one correctly.","category":"code","date":"March 11, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":314},{"slug":"how-to-build-vscode-extension-2026","title":"How to build a VS Code extension in 2026 (a working tutorial)","excerpt":"Build, test, and publish a VS Code extension in 2026. The current API, the publishing flow, and the gotchas.","category":"code","date":"January 28, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":315},{"slug":"how-to-set-up-storybook-2026","title":"How to set up Storybook in 2026","excerpt":"Storybook 8 is faster, Vite-native, and ships a built-in test runner. This guide covers installation, story writing, interaction testing, and plugging Storybook into CI.","category":"code","date":"April 3, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":317}],"sameCategory":[{"slug":"bazel-build-explained-2026","title":"Bazel Explained: What Hermetic Builds Actually Cost","excerpt":"Bazel delivers reproducible, precisely cached builds and demands that you describe everything. Here is what you get, what it costs, and who should say no.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":145},{"slug":"graphql-federation-2026","title":"GraphQL Federation: One Graph, Many Teams","excerpt":"Federation composes independently-owned subgraphs into a single API. Here is what it solves, the operational cost it adds, and when a simpler gateway is enough.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":300},{"slug":"hermetic-builds-explained-2026","title":"Hermetic Builds Explained: Same Inputs, Same Output","excerpt":"A hermetic build depends only on declared inputs. Here is what that property gives you, the common leaks that break it, and how to move toward it incrementally.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":130},{"slug":"monorepo-tooling-compared-2026","title":"Monorepo Tooling Compared: What You Actually Need","excerpt":"Monorepo tools solve task orchestration and caching, not repository layout. Here is what each tier provides and how to tell when you have outgrown the simple option.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":150}],"newer":{"slug":"how-to-build-ai-agent-2026","title":"How to build an AI agent in 2026: a practical guide from scratch","excerpt":"\"AI agent\" covers everything from a loop that calls one tool to a multi-agent system orchestrating dozens. Here is the practical breakdown of how to actually build one in 2026 — tools, patterns, and the failure modes nobody warns you about.","category":"guides","date":"January 29, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":270},"older":{"slug":"how-to-build-mobile-app-2026","title":"How to build a mobile app in 2026: React Native vs Flutter vs Expo","excerpt":"Build a real mobile app in 2026 without native expertise. Honest picks for React Native, Flutter, Expo, and when native still wins.","category":"code","date":"January 29, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":310}}