how do you pause a website before it loads, without blocking it?

the pause is the heart of dimmer. you type a distracting site, and instead of the feed you get a calm page with a countdown and one big button back to what you were doing. it sounds simple. getting it to appear before the site, every time, without breaking the back button, took more care than we expected.

the obvious approach, and why we didn’t use it

the first idea most people reach for is to watch the tab: when it starts loading instagram.com, send it somewhere else. Chrome extensions can listen for navigations and redirect them.

the trouble is timing. the part of an extension that listens runs in the background and may be asleep when you type the address. by the time it wakes and reacts, the site has often started painting. you see the feed for a split second, which is exactly the hit the pause is meant to prevent. redirecting after the fact also leaves an extra entry in the tab’s history, so pressing back lands you on the site you just escaped.

rules the browser checks for us

Chrome has another mechanism, declarativeNetRequest, built for ad blockers. an extension hands Chrome a set of rules in advance, and Chrome checks every request against them itself, before the request leaves the browser, whether or not the extension is awake.

dimmer keeps one rule per dimmed site: a top-level page request to that site is redirected to dimmer’s pause page, with the original address carried along. the site never loads, so it can’t flash. and because the redirect replaces the navigation rather than following it, the pause page takes the site’s place in history. back goes to wherever you were before.

when you choose to continue after the countdown, dimmer adds a second, higher-priority rule that lets that one tab through to that one site for a few minutes. every other tab still meets the pause.

the three pages that slip past

network rules only see requests that reach the network. we found three kinds of page that don’t:

1. pages served by the site’s own service worker. some sites install a worker that answers navigations from a local cache. the request never reaches the network, so no rule sees it.
2. pages restored from the back-forward cache. go back to a page you just left and Chrome may restore it from memory, untouched.
3. prerendered pages. a page loaded invisibly in advance, while you still had time left, can be shown after that time ran out.

for these, dimmer’s small script inside the site asks one question as the page appears: should this tab be at the pause? if the answer is yes, it swaps the page for the pause page. while it waits for the answer, which takes a few milliseconds, it covers the page with a plain blank sheet, so even these routes don’t flash. pages that came over the network have already passed the rules, so they get no sheet at all.

a detail that broke links

in testing, typing a dimmed address worked perfectly, but clicking a link to it from Google showed Chrome’s “this page has been blocked” screen. Chrome checks a redirect to an extension page against the page the link was on, and refuses unless that page is allowed to show it.

the fix was to make the pause page available to every site, with an option that gives it a fresh, private address in each browser session. sites can’t use it to detect that dimmer is installed, and links from anywhere now land on the pause as they should.

why this matters for a pause

all of this is in service of one small moment: the few seconds between deciding to open a site and seeing it. if the site flashes first, the moment is gone. if back doesn’t work, the pause feels like a trap instead of a choice. getting both right is what lets dimmer put a gentle stop in front of a site without ever blocking it.

if you’re weighing a pause against a full block, our page on when blocking is the right call compares the two. and if the pause is for evening scrolling, how to stop doomscrolling on a laptop shows how it fits with the rest.