Beyond basic blurring, BlurGuard ships four power features for advanced workflows: profiles for reusable blur configurations, focus mode for directing audience attention, tab masking for hiding browser identity, and present mode for clean sharing. Here's how to use each one.
Profiles — save and reuse blur configurations
If you frequently share the same pages (a dashboard, a CRM, an admin panel), setting up blurs from scratch each time is tedious. Profiles solve this.
Creating a profile
- Open the page you want to configure
- Set up all your blurs — element blurs, area zones, text selections, the whole layout
- Click 💾 Save on the toolbar (or use the Save section in the popup)
- Enter a name for the profile (e.g., "Sales Demo" or "Client Dashboard")
- Click Save
The profile captures all host-scoped blurs for the current hostname. It's stored in chrome.storage.local and persists across browser sessions.
Loading a profile
In the popup, expand the Profiles section. You'll see a list of saved profiles for the current site. Click any profile to apply it — all previous blurs are replaced with the profile's configuration instantly.
Managing profiles
Each profile entry has an X button to delete it. Deleted profiles are gone permanently — there's no undo. Profiles are per-site, so a "Sales Demo" profile saved on app.acme.com won't appear on other domains.
Pro tip
Create multiple profiles for the same site: one for internal reviews (less aggressive blurring) and one for client demos (maximum blurring). Switch between them with a single click.
Focus mode — spotlight a specific area
Focus mode (also called "spotlight") is a presentation aid that darkens everything on the page except a user-drawn rectangle. It directs your audience's attention to exactly the area you want to discuss.
How to activate
Click the Focus button on the toolbar. Then click and drag on the page to draw a rectangle. Everything outside that rectangle is darkened with a box-shadow overlay.
How it works
Focus mode uses a zero-size box element with a giant box-shadow that covers the entire viewport — except for a "cutout" at the position you drew. The result looks like a spotlight shining on one area.
- One zone at a time — drawing a new focus rectangle replaces the previous one
- Not persisted — focus zones disappear when you navigate away or reload
- Exit with Escape or click the Focus button again
Use cases for focus mode
- During a demo: "Let me draw your attention to this specific metric"
- In a recording: highlight one chart while the rest stays readable but dimmed
- On a call: walk through a multi-section page one area at a time
Focus mode is ephemeral — it's a live presentation aid, not a persistent blur. Use it alongside regular blurs for maximum impact: blur sensitive data first, then focus-mode the area you want to discuss.
Tab masking — hide browser tab identity
When you share your screen, the browser tab title and favicon are visible in the tab bar. If you're viewing an internal tool, the tab title might reveal the project name or client.
Tab masking replaces both:
- Tab title → replaced with "🔒" (lock emoji)
- Favicon → replaced with a purple circle SVG
How to activate
Click the TAB button on the toolbar. The current tab's title and icon are instantly masked.
Persistence and sync
Tab masking is persisted per hostname. If you mask tabs on crm.internal.com, the mask is automatically applied every time you visit that domain — even after closing and reopening the browser.
A MutationObserver watches the <title> and <link rel="icon"> elements, so the mask stays active even during SPA navigation (Single Page Applications that change the title dynamically).
Multiple tabs of the same hostname are kept in sync via chrome.storage.onChanged — mask one, and all other tabs on the same domain are masked too.
Present mode — clean sharing view
Present mode hides all BlurGuard UI elements so your audience sees only the page content — no toolbar, no blur handles, no picker highlights. The blurs themselves remain active; only the controls disappear.
How to activate
Click the Present button on the toolbar. The toolbar, all blur handles (trash icons), and any picker highlights are hidden. A CSS class bs-present-mode is added to the <html> element.
What stays visible
- All blurs (element, area, text, image swaps)
- Auto-detect blurs
- Focus mode overlay
- Tab masking
What gets hidden
- Floating toolbar
- Delete handles on blurred elements
- Picker highlights and cursor changes
- Hint bars at the bottom of the page
Combining features
These features are designed to work together. Here's a recommended setup for a client-facing demo:
- Load a profile with pre-configured blurs for the demo page
- Enable auto-detect (
Alt+Shift+A) to catch any PII you missed - Mask the tab (TAB button) to hide the internal URL
- Enable present mode to hide the toolbar
- Use focus mode during the demo to spotlight specific sections
- Hold Peek when you need to read a value yourself
This combination gives you a clean, professional screen share where sensitive data is invisible, the audience sees only what you want them to see, and you can reveal values on-demand with Peek.
Keyboard workflow
Alt+Shift+A (auto-detect) → Alt+Shift+B (picker for manual blurs) → TAB (mask tab) → Present (clean view) → Focus (spotlight). All available from the keyboard or toolbar.
