Scopes

Cinematographer-grade visual scopes for web development. Histogram, waveform, vectorscope, and composition grids — in a Chrome side panel.

Install from Chrome Web Store · Product site · MIT

---

What it is

Scopes is a Chrome extension that puts the instruments of cinematography and color grading — color histogram, waveform monitor, vectorscope, composition grids — into a live side panel pointed at any tab. Enable it, and the scopes read the rendered pixels in real time, like a broadcast monitor for the web.

Web dev has optimized hard for accessibility and UX metrics and lost the visual art dimension. A page can pass every a11y audit and still be visually flat. Scopes brings the instruments cinematographers and colorists have used for decades to the one surface where the image actually lives: your browser. Scopes inform judgment — they don't verdict.

The scopes

• Color Histogram — luminance and RGB distribution
• Waveform Monitor — exposure left-to-right across the frame
• Vectorscope — hue and saturation as a color wheel
• Composition Grids — rule of thirds, safe areas, golden ratio

Install

From the Chrome Web Store

Install directly from the Chrome Web Store listing.

From GitHub Releases — one-liner (macOS + Linux)

curl -fsSL https://raw.githubusercontent.com/zieka/scopes/main/scripts/install.sh | bash

The script downloads the latest release from GitHub, extracts it to ~/.local/share/scopes, and prints the exact folder path you'll paste into Chrome's "Load unpacked" dialog. Chrome and Chromium-based browsers disable drive-by .crx installs from outside the Web Store, so the one-click install step is something you have to do yourself — but the script handles everything up to that point, and the full instructions print at the end.

To upgrade, re-run the same command. It overwrites the install dir in place and Chrome picks up the new version the next time you open it.

From GitHub Releases — manual (any platform)

1. Grab the latest scopes-<version>-chrome.zip from Releases.
2. Unzip it somewhere permanent (~/Applications/scopes on macOS, %LOCALAPPDATA%\scopes on Windows).
3. Open chrome://extensions (or arc://extensions, brave://extensions, edge://extensions).
4. Toggle on Developer mode (top-right).
5. Click Load unpacked and select the unzipped folder.
6. Pin Scopes to your toolbar. Hit Alt+S on any tab to enable scopes.

From source

bun install
bun run build

Then load .output/chrome-mv3 as an unpacked extension the same way described above.

Develop

Prereqs: Bun and Chrome.

bun install        # install deps
bun run dev        # WXT dev server, auto-reloads the extension
bun run build      # production build to .output/chrome-mv3
bun run zip        # zipped artifact for CWS upload (to .output/*-chrome.zip)
bun run check      # svelte-check / typecheck

Product site

The landing page lives in /site as an independent Astro + Starlight workspace. It has its own dependencies and its own lockfile; the extension build is unaffected by anything that happens in there.

cd site
bun install
bun run dev        # local preview at http://localhost:4321/scopes/
bun run build      # static output to site/dist

Deployed automatically to GitHub Pages on push to main whenever any file under site/** changes. Live at https://zieka.github.io/scopes/.

Starlight is installed and dormant — drop markdown under site/src/content/docs/, add a sidebar entry in site/astro.config.mjs, and a full docs section lights up with zero additional setup.

Publishing a new version

1. Bump version in root package.json (WXT reads this into the manifest at build time).
2. Commit and push to main.
3. Actions → Publish extension to Chrome Web Store → Run workflow.

That's it. The workflow reads the version from package.json, runs bun run zip, uploads the result to Chrome Web Store via the API, and publishes under your existing listing. Chrome rejects the upload if the version was not incremented — that's the safety net against re-publishing the same build.

License

MIT