Go on, stretch, sip, scroll. We'll blame the browser. 😉

Buffer Break is a Chrome extension that makes the tab you're on look frozen. It takes a real screenshot of the page, covers the page with it so nothing can be clicked or typed into, and then shows Chrome's familiar "Page Unresponsive" message. To everyone else, the page just hung. To you, it's a break.

It was built with Figma in mind, but it works on almost any website. It runs in Google Chrome, Microsoft Edge and Brave.

In your browser it appears as FocusFlow: Workspace Optimizer, so it looks like an ordinary productivity tool in your toolbar and extensions list. Its description still says what it really does.

It started on a Tuesday. I'd been staring at the same Figma frame for three hours. My neck had locked into a permanent "designer hunch," my coffee had gone cold, and my eyes were starting to see in 8px grids.

I wanted to stand up and stretch. Just two minutes. But the boss was doing laps, and an empty chair at the wrong moment says "not working" louder than any status update ever could.

Then I had a thought: what if the computer took the blame?

Everyone has watched a browser freeze. Nobody questions it. You just sigh and wait. So I built Buffer Break. One shortcut, and my screen locks up with a perfectly believable "Page Unresponsive" message. To the world, Chrome is having a moment. To me, it's time to roll my shoulders, refill my water, and remember I have legs.

Is it the most productive thing I've ever made? Arguably, yes. My back feels better, my eyes get a break from the glare, and science says short breaks improve focus. So technically, this is a productivity tool. That's what the name says, anyway.

You'll use it too. Maybe not today, but on that long afternoon when your spine starts filing complaints, you'll remember: Alt + Shift + F.

Stretch, sip, scroll. We'll blame the browser. 😉

• Why I built it
• What it does
• Install (about 2 minutes)
• How to use it
• Settings
• Troubleshooting
• Privacy and permissions
• Updating and uninstalling
• Project structure
• The Figma plugin (experimental)

1. You press Alt + Shift + F (or click Freeze this tab in the popup).
2. The extension takes a screenshot of the current tab and lays it over the page. The page looks exactly the same, but nothing reacts: no clicks, no scrolling, no typing.
3. After about 5 seconds, a "Page Unresponsive" box appears with Exit page and Wait buttons, matching your light or dark mode.
   • Wait hides the box, and it comes back 15 seconds later, just like the real one.
   • Exit page does nothing.
4. When you're ready, press Ctrl + U and the page is back to normal instantly. You can also set a timer to unfreeze automatically.

The extension isn't on the Chrome Web Store, so you load it yourself using Chrome's Developer mode. Nothing extra needs to be installed.

Go to the Releases page, open the latest release, and download buffer-break-extension.zip.

Prefer the code? Click the green Code button → Download ZIP, then use the chrome-extension folder inside it in step 3.

• Windows: right-click the zip → Extract All… → Extract.
• Mac: double-click the zip.

You'll get a folder called buffer-break-extension. Put it somewhere it can stay, such as your Documents folder. Don't delete or move it later: Chrome loads the extension from this folder every time it starts.

1. Open a new tab and go to:
   • Chrome: chrome://extensions
   • Edge: edge://extensions
   • Brave: brave://extensions
2. Turn on Developer mode. It's a switch in the top-right corner (in Edge, it's in the left sidebar).
3. Click Load unpacked.
4. Select the buffer-break-extension folder (the one that contains manifest.json) and click Select Folder.

You'll see FocusFlow: Workspace Optimizer appear in your extensions list.

Click the puzzle-piece icon 🧩 next to the address bar and click the pin next to FocusFlow. You don't have to: the keyboard shortcut works either way.

Quick test: open any website, press Alt + Shift + F, try clicking around (nothing happens), wait for the "Page Unresponsive" box, then press Ctrl + U.

Ctrl + U only unfreezes while a page is frozen. The rest of the time it does whatever it normally does on that site.

Click the toolbar icon to open the popup.

• Duration: Until I unfreeze (default) keeps the page frozen until you press Ctrl + U. Timer unfreezes it automatically after 5, 10, 15 or 30 minutes, or any number of minutes you type into Other (up to 240).
• Freeze shortcut: click the ✏️ pencil to change Alt + Shift + F. This opens Chrome's shortcut settings. Chrome requires shortcuts to include Ctrl or Alt.
• Toolbar icon: click the Toolbar icon row to pick a different icon. You can choose from neutral icons (dots, cloud, note, leaf, ring) or emoji (☕ 🌿 📎 🧊 🐢 😴 🍵 📌). The default is a plain grey dots icon that gives nothing away. This only changes the toolbar icon; the extensions page always shows the default.

Your settings are saved and remembered.

Buffer Break doesn't collect, store or send any data. It makes no network requests at all.

• The screenshot is held only in memory while the page is frozen. It's never saved to disk or uploaded, and it's discarded the moment you unfreeze.
• The only things saved are your settings (duration, timer length and toolbar icon), stored locally in your browser.

What each permission is for:

Update: download the new release, replace the old folder's contents with the new ones, then go to chrome://extensions and click the ↻ reload icon on the FocusFlow card.

Uninstall: go to chrome://extensions and click Remove on the FocusFlow card. You can then delete the folder.

buffer-break/
├── chrome-extension/        The Chrome extension (this is what you install)
│   ├── manifest.json        Name, permissions and the Alt+Shift+F shortcut
│   ├── background.js        Takes the screenshot and starts the freeze
│   ├── freeze.js            Runs in the page: overlay, input blocking, dialog, Ctrl+U
│   ├── popup.html / .js     The settings popup
│   ├── icons.js             Toolbar icon options (drawn in code)
│   └── icons/               Default icon images
└── figma-plugin/            Earlier Figma desktop-app version (experimental)

No build step, frameworks or dependencies: it's plain HTML, CSS and JavaScript. To work on it, edit the files in chrome-extension/, then click ↻ on the extension's card at chrome://extensions to reload it.

figma-plugin/ contains the first version of this idea, built as a plugin for the Figma desktop app. Figma plugins can't take real screenshots, cover Figma's side panels, or hide their own title bar, so it isn't as convincing as the Chrome extension. It also still contains two diagnostic buttons (Test coverage and Test transparency) from that experiment.

To try it: in the Figma desktop app, open a design file, then go to Menu → Plugins → Development → Import plugin from manifest… and choose figma-plugin/manifest.json. Freeze with the Freeze button and unfreeze with Ctrl + Alt + Shift + B.

Take breaks responsibly. 😉