Clean Browser

Frame any website in a polished macOS browser shell and capture a pixel‑perfect screenshot — in one click.

---

⚡ Quick install

brew install --cask --force Grkmyldz148/tap/clean-browser

_{macOS · Apple Silicon · free & open source — always the newest signed .dmg}

---

✨ Why Clean Browser

Marketing shots, docs, changelogs and social posts look better when the site sits in a clean browser frame on a nice backdrop. Clean Browser is a tiny Chromium browser whose whole job is producing that shot: open a URL, style the chrome, pick a backdrop, and export at retina resolution — without a design tool, plugins, or manual cropping.

• 🖼 The frame is the product. The styled macOS bar stays in the exported image.
• ⚡️ One click. Viewport or full‑page capture, straight to ~/Pictures/Clean Browser or the clipboard.
• 🎨 Tunable & repeatable. Every frame detail is adjustable and savable as a named preset.

---

🎬 Demos

_{Settings · backdrops · export · watch full MP4 ↗}

_{Browse & frame across viewports · watch full MP4 ↗}

---

🧩 Features

Frame & chrome

• Styled macOS browser shell with traffic lights and an address bar that stays in the shot
• Live page rendered in an embedded Chromium view inside the frame
• Custom / fake address text (show yoursite.com while loading localhost:3000)
• Manual light / dark chrome theme, or Auto‑match — derive the bar color & corner radius from the open page

Backdrops & canvas

• Backdrop gallery: solids, mesh gradients, and your own custom photo (with an always‑present “+” to add/replace)
• Matte padding, page corner radius, canvas color and soft shadow

Capture & export

• Viewport screenshot (⌘⏎) and full‑page scrolling capture (⌘⇧F)
• Copy to clipboard (⌘⇧C) or save to ~/Pictures/Clean Browser
• Export scale @1× / @2× / @3×, format PNG / JPEG / WebP, with quality control
• Capture options: hide the toolbar and scrollbars for cleaner edges

Sizing & presets

• Viewport presets — desktop / tablet / phone — plus aspect‑ratio chips (16:9, 1:1, 9:16, OG) and custom W × H
• Frame presets: save the current look and window size as a named preset, switch between them, delete, or jump back to Default
• Session restore: last URL, viewport size and chrome visibility are remembered

Native settings

• Tabbed Settings window (Frame · Canvas · Export) with macOS vibrancy, light/dark support and a live preview — open with ⌘,

---

⬇️ Install

Apple Silicon (arm64) only. Releases are signed with a Developer ID and notarized by Apple, so they open with a normal double‑click — no Gatekeeper workaround needed. Intel Macs need a separate x64/universal build.

Homebrew (recommended)

brew install --cask --force Grkmyldz148/tap/clean-browser

Download

1. Click Download DMG above — always the newest clean-browser-<version>-arm64.dmg — or browse every build on Releases.
2. Open it and drag Clean Browser onto Applications.
3. Double‑click to launch — it's signed and notarized, so macOS opens it without warnings.

Clean Browser is signed with a Developer ID Application certificate and notarized + stapled by Apple.

---

⌨️ Keyboard shortcuts

Action	Shortcut
Take screenshot	⌘⏎
Full‑page screenshot	⌘⇧F
Copy screenshot to clipboard	⌘⇧C
Open Settings	⌘,
Reload page	⌘R
Resize → mobile / tablet / laptop / desktop	⌘1 · ⌘2 · ⌘3 · ⌘4
Cut · Copy · Paste · Select all · Undo	⌘X · ⌘C · ⌘V · ⌘A · ⌘Z

---

🛠 Development

npm install
npm run electron:dev

Press ⌘, (or Clean Browser → Settings…) to tune the frame live.

---

📦 Build

Produce the macOS DMG (custom install layout + app‑icon volume icon):

npm run electron:build

For a local unsigned build, skip code‑signing discovery:

CSC_IDENTITY_AUTO_DISCOVERY=false npm run electron:build

Output lands in release/electron/. A post‑build hook (build/set-dmg-icon.cjs) embeds the app icon into the .dmg file so it shows in Finder.

---

🗂 Project structure

clean-browser/
├─ index.html              # app shell (browser chrome + stage)
├─ src/                    # renderer: navigation, capture, theme, backdrop, settings glue
├─ electron/
│  ├─ main.cjs             # main process: windows, menu, IPC, capture, presets, DMG icon
│  ├─ settings.html        # tabbed Settings window (Frame · Canvas · Export)
│  └─ preload.cjs          # context‑isolated bridges
├─ landing/index.html      # bundled home / start page
├─ src-tauri/icons/        # app icon set (icns / png / ico …)
├─ build/                  # DMG background + icon hook
└─ release/electron/       # packaged .app and .dmg

---

⚙️ Engine note — Electron vs Tauri

The shipping target is Electron, which bundles Chromium inside the app — the right choice when the captured browser must be genuinely Chrome/Chromium‑based and render identically everywhere.

A Tauri target is kept as an alternate lightweight shell, but Tauri does not bundle Chromium (it uses the system WebView: WKWebView on macOS, WebView2 on Windows, WebKitGTK on Linux), so screenshots can differ by platform.

npm run tauri:dev     # alternate WebView shell
npm run tauri:build

---

🧭 Roadmap

Planned work (full list in ROADMAP.md): element/cookie‑banner hiding before capture, page zoom, recent‑URL bookmarks, loading progress bar, annotation & redaction, a capture‑history gallery, and batch capture.

---

_{Built by Görkem YILDIZ · for clean shots.}