SWYoon Labs

Drawing over a webpage sounds simple: create a canvas, stretch it across the viewport, and listen for pointer events. That prototype works in a few minutes. Turning it into a usable Chrome extension is a different problem. The overlay must remain sharp on high-density displays, avoid breaking the page when drawing is disabled, preserve annotations while a side panel closes, handle text and erasing, and capture the visible result without sending private page data to a server. I faced those problems while building Markerly, a Manifest V3 extension for drawing, highlighting, typing notes, and saving annotated screenshots. This article walks through the architecture and the design choices that mattered most. Split the extension into three responsibilities The implementation uses three contexts: Context Responsibility Content script Creates the overlay, collects pointer input, and renders strokes Side panel Controls tools, colors, sizes, opacity, capture, and mode Se...

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 ...