GitHub - prabhic/hn-quick-scan

GitHub

3 min read Original article ↗

A Chrome extension that makes Hacker News faster to scan. By default it does one thing: it groups the front page under topic headings (Hardware ▸ Chips, AI ▸ Model Releases, …) using Chrome's on-device model — **Otherwise looks exactly as usual **. The extras are opt-in, independent toggles: a calmer skin (fonts, colours, spacing), split view, and a focus reader. See vision.md.

How it works

flowchart TD
    subgraph page["HN page — content scripts"]
        content["content.js<br/>skin · split view · focus reader"]
        classify["classify.js<br/>organize list · ⚙ on-page settings + editor"]
        editor["editor.js<br/>category editor (form / JSON)"]
        settings["settings.js<br/>defaults · validation · default taxonomy"]
    end

    sw["background.js — service worker<br/>warm on-device model<br/>(Gemini Nano · Prompt API)"]
    store[("chrome.storage.local<br/>settings · taxonomy · title→category cache")]
    popup["popup<br/>toolbar settings + editor"]

    content -->|1 read settings| store
    classify -->|2 story titles| sw
    sw -->|3 categories| classify
    classify -->|4 reorder rows + cache| store
    editor & popup -->|edit taxonomy / settings| store
    store -.->|onChange → live restyle / re-group| page

    classify --- editor
Loading

In words: on a list page, classify.js sends story titles to the service worker, which keeps one model session warm (so the ~10s load is paid once, not per page) and returns a category for each. Rows are reordered under headings and the result is cached. Editing categories or settings — from the popup or the ⚙ gear on the page — writes to storage; every open tab reacts live.

Show HN grouped into stack sections — Hardware & Silicon, Systems & Low-Level, Backend & APIs, Apps & Frontend — with HN's ranks and nav untouched

The Show HN page, grouped by layer of the stack (shown with the optional skin on). Ranks, votes and links are HN's own — rows are only reordered.

Install (unpacked)

  1. chrome://extensions → turn on Developer mode
  2. Load unpacked → select this folder
  3. Open news.ycombinator.com

Settings live in the toolbar popup and the ⚙ gear on the HN list. Each feature is an independent toggle. Grouping is on by default and shows top-level sections; the Sub-sections second pass (finer grouping, slower) is opt-in. Restyle Hacker News (the skin) and split view are off by default; the focus reader is on but stays invisible until you press F. Split view needs a window wider than 900px.

Requirements

  • Organize by stack needs Chrome 138+ with the on-device Prompt API and model available (the popup shows status + a one-time download). Without it, the skin still works.

Files

File Role
manifest.json content scripts + service worker registration
src/hn-reader.css the skin — palette, type, spacing, split layout
src/content.js reads storage, sets attributes, builds the reading pane
src/classify.js groups the list; the on-page gear (settings + editor)
src/background.js service worker — the warm on-device model session
src/editor.js category editor (form + JSON), shared by popup and gear
src/settings.js defaults, validation, default taxonomy — shared everywhere
src/popup.* the toolbar popup

Dev

No build step. Edit → reload at chrome://extensions → refresh HN. Tests (Playwright, dev-only): npm install && npx playwright install chromium && npm test.

License

MIT. Contributions are welcome — open an issue or a pull request.