PageFrame

About

Ever opened a tab and wondered for a split second whether you're on production or staging? PageFrame solves that with a simple colored border around the page.

Define color profiles - give each one a name, border color, opacity, and width. Then assign them to URL patterns. Every time you visit a matching page, the border appears instantly. No clicks needed, no mental overhead.

How it works:
- Create named color profiles (e.g. "Production" in red, "Staging" in orange, "Local" in blue)
- Add URL rules with wildcards (`https://app.example.com/*`) or full regular expressions
- When multiple rules match a page, the profile highest in your list takes priority - you stay in control
- Optionally show a centered text label on matching pages - choose the text, size, color, and opacity

Built for developers and QA teams:
- Instantly distinguish production from staging from local environments
- Mark third-party tools, admin panels, or any URL you want to keep an eye on
- Each rule can be individually disabled with the Off checkbox - mute it without losing your setup

Flexible disable options:
- Disable all borders globally in one click
- Choose how long the disable lasts: Forever, This session, or until the next Reload
- Individual rules can be toggled off without affecting the rest

Clean and lightweight:
- Works on every page, including SPAs - re-evaluates on `pushState` / `replaceState` navigation
- Borders are rendered with a non-intrusive fixed overlay that never interferes with page content or layout
- Export and import your entire configuration as JSON - share it with your team or back it up

Privacy:
All settings are stored locally in your browser. No accounts, no sync, no data leaves your machine.