How to Build a Dual-State Calculator in a Chrome Side Panel
A calculator looks like a small programming exercise until it has to behave like a real tool. The arithmetic is the easy part. The difficult parts are state, keyboard focus, percentage rules, decimal precision, localization, persistence, and recovery after invalid input. I ran into all of those details while building a calculator for Chrome's side panel. I also wanted something ordinary calculators do not provide: two independent calculation areas that remain visible at the same time. That requirement turned a tiny interface into a useful state-management case study. This article explains the design decisions behind that implementation. The examples use plain JavaScript and Manifest V3, but the same ideas apply to small React, Vue, or desktop calculator projects. Why two calculators need two complete states The original problem was not a lack of calculator apps. It was losing the first number while working out the second one. Imagine comparing two shopping carts, checking a ...