Opacify

Dim bright screens, tutorials, PDFs, and videos with a per-tab opacity overlay or smart invert filter.

Privacy-first — 100% local, no data ever leaves your device.

---

Why Opacify?

Watching video tutorials or reading bright documents (PDFs, whitepapers, documentation) at night causes significant eye strain.

The obvious fix — reducing system-wide screen brightness — has a catch: other windows and tabs that already use dark themes become too dim to use comfortably.

Opacify solves this by applying a dimming overlay or smart color inversion on a per-tab basis. Dark-themed sites stay bright while only the eye-straining ones get dimmed. It works on regular websites, local file:// pages, and even locally opened PDFs (in Chrome).

---

Features

• Per-Tab Dimmer Mode — Translucent overlay dimmer (0–100% opacity) with selective Smart Whites mode (mix-blend-mode: multiply) to dim bright white backgrounds while keeping dark text crisp & untouched.
• Brightness Boost Mode — Lifts screen luminance up to +100% (2.0x brighter) with selective Smart Blacks mode (mix-blend-mode: lighten) to brighten dark shadow areas without blowing out highlights.
• Smart Invert Filter — Inverts page colors with a 180° hue rotation to preserve natural image & video tones.
• Concurrent Multi-Mode — Apply Dimmer overlay concurrently on top of Smart Invert or Brightness Boost filters simultaneously.
• Scope Control:
  • Full Page — Applies effect across the entire tab viewport.
  • Player Only (YouTube) — Targets only the video player container, leaving page UI unaffected. Perfect for watching tutorials.
• Reverse Slider — Toggle between standard (0 = off) and reverse (0 = full) slider behavior.
• Per-Origin Memory — Optionally remember settings per site. Automatically re-applies on your next visit.
• Local File Support — Works on file:// HTML pages and PDFs (see notes below).
• Privacy First — 100% local processing. Zero network requests, zero telemetry.

---

Browser Compatibility

Feature	Chrome / Brave / Edge	Firefox
Regular websites	✅	✅
YouTube Player Only	✅	✅
Web PDFs (https://...pdf)	✅	✅
Local HTML files (file://)	✅ (enable file access)	✅
Local PDFs (file:///*.pdf)	✅ (enable file access)	❌ Firefox limitation

Firefox local PDFs: Firefox renders local PDFs in an internal browser context that blocks all extension injection — this is a hard Firefox architectural restriction, not an Opacify issue. Web-served PDFs work fine.

---

Installation & Setup

Requires Node.js for building.

Build

npm run build

Outputs:

• dist/chrome/ — Unpacked extension for Chromium browsers
• dist/firefox/ — Unpacked extension for Firefox

Chrome / Brave / Edge

1. Go to chrome://extensions/
2. Enable Developer mode (top-right toggle)
3. Click Load unpacked → select dist/chrome/
4. For local files & PDFs: Find the Opacify card → Details → toggle "Allow access to file URLs" ON

Firefox

1. Go to about:debugging#/runtime/this-firefox
2. Click Load Temporary Add-on...
3. Select dist/firefox/manifest.json

---

Project Structure

ext/opacify/
├── manifest.json             # Base manifest (Chrome MV3)
├── manifests/
│   ├── manifest-chrome.json  # Chrome build target
│   └── manifest-firefox.json # Firefox build target (Gecko ID + event scripts)
├── background.js             # Service worker — storage, scripting injection
├── content.js                # Content script — overlay & invert effects
├── popup/
│   ├── index.html            # Popup UI
│   ├── script.js             # Popup logic
│   └── styles.css            # Glassmorphic dark UI styles
├── icons/
│   └── icon.svg
├── package.json              # npm build scripts
└── build.js                  # (not used — build is pure npm scripts)

---

License

MIT — feel free to use and customize.