How to Structure a Production-Ready Chrome Extension (Manifest V3)

I've built several Chrome extensions over the past few years and kept running into the same problem. Most Chrome extension templates are fine for a quick demo but fall apart when you try to build a real product. As soon as you introduce things like: popup UI side panel UI content scripts background service workers message passing storage API calls the architecture gets messy very quickly. The first couple of extensions I built ended up with logic scattered between popup scripts, content scripts, and the background worker. It worked, but it quickly became difficult to maintain as the extension grew. After rebuilding the same structure multiple times, I eventually settled on an architecture that works reliably for production extensions. The Basic Architecture The architecture that has worked best for me looks like this: Each layer has a clear responsibility. Content Scripts Content scripts stay very thin and mainly extract page data. They should avoid business logic whenever possible . T