Border Breaker extension

I bought an ultrawide monitor and then discovered that films do not use it. Every streaming player is built for a 16:9 world, so it scales the video to the height of the window and paints the leftover width black. On a 21:9 screen that is roughly a third of the monitor showing nothing.

The pixels exist and the screen exists. The picture simply refuses to use them, and not one of the major services offers a control to change it.

The obvious fix is to scale the video, and the obvious way to scale a video is to touch the video stream, which is exactly what Netflix, Max, Disney+ and Prime are built to prevent. Anything that reads, decodes or re-renders protected frames gets blocked, and those are precisely the services people watch on a big monitor. So the constraint was set before any code: whatever this does, it can never read a pixel.

The product shape was settled before building, as a structured pass through the decisions that would be expensive to reverse: which browsers, which modes, how the controls are reached, and how permissions work.

The calls that came out of it were to support Chromium and Firefox from one codebase, to expose the control through a toolbar popup plus two keyboard shortcuts rather than an overlay button injected onto the player, and to run automatically only on a curated list of services while every other site is opt-in per domain. That last one costs a worse first run on an unlisted site and buys an extension that does not ask to see every page you visit.

The one genuinely researched decision was the keyboard shortcut. Alt was the instinctive choice and it is wrong twice over: on macOS Alt is Option, so Alt with a letter types an accented character, and in Chromium Alt with a letter triggers page access keys. Checking that before building rather than after is the difference between a default and a bug report. The bindings are Ctrl and Shift, mapping to Command and Shift on Mac, both rebindable.

It was declared finished on the strength of unit tests and an end to end test that drove a synthetic local page with a plain video element on it. That test passed. The extension had never once been loaded on a real streaming site, and everything below follows from that single gap.

The first thing I did was open YouTube, and all three modes blanked the screen entirely. Forced ratio filled the top half and left the bottom half empty. None of it worked in fullscreen, where the picture collapsed into the right half of a screen split down the middle. Turning the extension off did not put anything back: the video stayed blank.

The cause was precise, and the kind of thing a synthetic test never surfaces. The code was setting the video's height to one hundred percent, and on YouTube the video sits inside a container that has zero height, so one hundred percent of nothing is nothing. The off switch failed for a related reason: resetting the styles removed the sizing YouTube itself had set, so there was nothing left to fall back to.

The rewrite stopped resizing anything. It applies a transform to scale the video and touches nothing else, so the player's own sizing survives untouched and removing the transform genuinely reverts. That was diagnosed by reading YouTube's live DOM rather than by reasoning about it, and verified on the real player before it went anywhere.

It fixed YouTube and broke HBO Max, which the previous version had handled fine. Max already stretches its video to fill the player, so a scale transform had nothing left to grow into.

In the middle of this I was told that filling a 21:9 screen from a 16:9 source must lose part of the picture unless you accept bars or distortion. That is wrong, and I said so. Stretch fills the screen with the entire frame still visible and pays for it in mild distortion. Losing content only ever applied to Crop. It is a small thing to be right about and it mattered, because accepting the wrong constraint would have quietly removed a mode.

So the fix was to stop pretending one technique fits every site. Each adapter now declares which strategy it wants, and the controller branches. YouTube uses the transform, because its video is letterboxed smaller than its player. Every other site uses the original sizing approach, because their video already fills theirs. Adding or repairing a site became a local change that cannot reach the others, which is the property I actually wanted.

Last, the forced ratio row came out of the popup. It had been built and it worked, and three modes covered what the thing is actually for, so the presets were adding buttons rather than capability. The maths is still in the engine, unreachable.

The engine is pure and knows nothing about the DOM. It takes a mode and a set of measured numbers and returns CSS. Everything site-specific lives in an adapter, which declares an id, the URL patterns it matches, its strategy, and three functions: find the video, find the element that does the clipping, and tell me when the site navigates without reloading. That is the whole contract, and it is why a broken site is a small local fix rather than an investigation.

A controller is the glue between them. It asks the adapter for the video and its container, measures both, hands the numbers to the engine and writes back the CSS it returns. The measurements deliberately use properties that ignore CSS transforms, so re-applying a setting never compounds the scale it already applied.

Most of the real difficulty is that streaming players rewrite their own DOM constantly. Each video gets a mutation observer watching its style and class attributes, so a player stripping the extension's CSS gets it re-applied, gated behind a check so it cannot fight itself into a loop. A resize observer recomputes on theater mode, window resize and fullscreen. If the clipping container itself is swapped out, the old one is restored before the new one is adopted.

Detecting in-page navigation is where the site-specific work concentrates. YouTube fires its own event when it finishes navigating, so the adapter listens for that. Nothing else does, so the fallback patches the history API to emit a synthetic event and pairs it with a debounced observer that fires when a video element is added or removed anywhere in the tree.

Manifest V3 splits the extension into three contexts and the split is not cosmetic. A background worker owns storage, the keyboard commands and message routing. A content script does every piece of DOM work. The popup is the entire settings surface, and there is no options page. Storage is keyed per host and owned by exactly one context, because the popup and the content script racing on the same key is a bug you only find intermittently. The worker sleeps when idle, so every listener registers synchronously at the top level rather than inside a callback.

Firefox does not support service workers in Manifest V3 at all, so the build emits a non-persistent event page there instead, and the Firefox build needs an explicit flag because the tooling still defaults it to the older manifest version. The permission model leans on Manifest V3 as well: curated hosts are declared up front, everything else sits behind an optional wildcard that grants nothing until the user presses Enable, which must happen inside the click itself because the permission request requires a user gesture. Refusal is a first class outcome rather than an error, and the popup simply stays in its inactive state.

One build bug worth keeping. Importing the host list from the build config pulled the framework's Node tooling into the content script bundle, which grew it to over a megabyte and threw a reference error on load that killed the script outright. Moving one constant into its own file fixed it. The end to end test is what caught it, which is the argument for having one at all even after it failed to catch everything above.

Nothing here was benchmarked and no performance claim is made. Two things were genuinely verified rather than assumed: the shortcut conflicts, checked across Chromium, Firefox, macOS and page access keys, and the transform recipe, confirmed by reading the real dimensions off YouTube's player in the browser.

Cropping works from the ratio you choose, not from the picture. Detecting where the black bars actually are would mean sampling frames into a canvas, and reading protected frames back is precisely the thing the DRM services block. So a film with unusual framing needs a manual choice, and automatically removing a movie's baked-in letterboxing is not merely unbuilt, it is unavailable by that route.

Stretch and Crop are an honest pair rather than a redundant one. Stretch keeps every pixel of the frame and leans the geometry slightly. Crop keeps the geometry exact and trims the top and bottom. There is no third option that does both, and offering one would be a lie.

Curated sites run automatically and everything else asks per domain. That is a worse first experience on an unlisted site, in exchange for an extension that never requests access to every page you visit.

Forced ratio presets were built, shipped and then removed. Three modes cover what the thing is for, and every extra button in a popup that size costs more than it returns.

It is not in the Chrome Web Store or on Firefox Add-ons, so it loads as an unpacked extension, and Firefox drops unsigned add-ons on restart. That is a cost paid in setup friction rather than in store review.

Manual fine tuning, pixel detection, Safari and picture-in-picture were all left out, so the first version does one thing rather than four things partially.

Runs on Chromium and Firefox from one Manifest V3 codebase, source public. Three modes reachable from a toolbar popup and two keyboard shortcuts that keep working in fullscreen, where the toolbar is out of reach and the black bars are most obvious.

Settings persist per site and reapply on load and on in-page navigation, so a service that swaps to the next video without a page reload keeps the ratio you chose.

Adapters ship for YouTube, Netflix, Max, Disney+, Hulu and Prime plus the generic fallback. YouTube and Max are the two confirmed working on a real ultrawide. The rest are best-effort selectors that have not been verified, because the DRM services require a real login and block scripted playback, so they are covered by a manual checklist rather than by tests.

A test that passes against a page you built to make it pass is not evidence. This shipped as finished on unit tests plus an end to end run against a synthetic page with a plain video element, and the very first contact with a real player blanked the screen in three different ways. The synthetic test was not wrong, it was answering a question nobody was asking.

The corollary is that the bug lived in the gap between the test environment and the real one, which is where this class of bug always lives. Diagnosing it meant opening the actual player and reading the actual DOM, and the fix was verified the same way before it went anywhere. Reasoning about someone else's markup is guessing.

Fixing a thing you cannot see all of is how you break the next one. The transform rewrite genuinely fixed YouTube and genuinely broke Max, because it replaced one universal assumption with a different universal assumption. The version that survived stopped assuming anything was universal and let each site declare what it needs, which is slower to write and the only one that has held.

Being handed a confident explanation is not a reason to accept it. I was told that filling an ultrawide screen from a 16:9 source must lose part of the picture. It does not, and taking that at face value would have quietly cost a feature. Knowing enough to push back on the reasoning, rather than only on the result, is most of what makes working this way productive.

Removing a working feature is a decision, not an admission. Forced ratio was built, functional and cut, because three modes covered the actual need and the presets were spending interface on capability nobody wanted.