A Firefox extension that reskins old Reddit post listings by relocating the subreddit name and comment count into styled badge elements positioned above each post title. The original elements are hidden and replaced by clickable badge links.
**Target:** old.reddit.com only (including www.reddit.com when the user's preference renders old Reddit).
**Scope:** All pages where posts appear with subreddit and comment metadata — front page, subreddit listings, user profiles, search results, multi-reddits, and comment pages.
## Architecture
### Approach
Pure CSS + vanilla JS content script. No frameworks, no build step. The extension popup uses plain HTML/CSS/JS for the settings UI.
**Rationale:** Old Reddit has a stable, well-known DOM structure. The scope is small enough that a framework or build tooling would add unnecessary complexity. The modular file layout supports adding new tweaks later.
-`content_scripts` matched to `*://old.reddit.com/*` and `*://www.reddit.com/*`. On `www.reddit.com`, the script naturally handles the old-vs-new ambiguity because it targets `div.thing.link` elements, which only exist when old Reddit is rendered.
-`content_scripts.css` includes `badges.css` for immediate injection at CSS parse time (prevents FOUC by hiding original elements before JS runs).
-`content_scripts.js` lists all JS files in order: `lib/settings.js`, `content/tweaks/badges.js`, `content/main.js`. Content scripts cannot use ES module `import`/`export`, so all files share the same global scope via the manifest's script array.
Each tweak is an individual file under `content/tweaks/`, responsible for one self-contained modification. `main.js` loads settings and calls each enabled tweak. Adding a new tweak means: drop a file in `tweaks/`, add it to the manifest's `content_scripts.js` array, and wire it in `main.js`.
1. Query all `div.thing.link` elements on the page (the `.link` class distinguishes posts from comments, avoiding wasted iteration over comment nodes).
2. For each post, extract the subreddit link's `href`/text and the comments link's `href`/text. The comments badge uses the original text verbatim, except when the text is `"comment"` (meaning zero comments), in which case the badge displays `"0 comments"`.
3. Create two badge elements (styled `<a>` tags) and insert them into a new container `div.reddit-tweaks-badges`, placed as the first child of the post's `div.entry` (above the title).
4. The original subreddit element in the tagline and the comments link in the flat-list are hidden via CSS rules in `badges.css` (injected at CSS parse time by the manifest, so they're hidden before JS runs).
A `MutationObserver` watches for new `div.thing.link` children being added to the page, covering RES infinite scroll and Reddit's own pagination. The observer target uses a fallback chain for robustness across page types: `#siteTable` (standard listings) → `.content[role="main"]` (fallback) → `document.body` (last resort). New posts are processed on insertion.
The content script checks for RES night mode via the `.res-nightmode` class on `<body>` and applies the dark palette via a CSS class toggle (`rt-dark`). A `MutationObserver` on `<body>` watches for `class` attribute changes to detect RES dark mode being toggled mid-session, updating badge colors reactively. Users can also force a mode in settings (Auto / Light / Dark), which bypasses detection entirely.
Colors are applied via CSS custom properties (`--rt-sub-bg`, `--rt-sub-border`, `--rt-sub-text`, `--rt-com-bg`, `--rt-com-border`, `--rt-com-text`) set on the badge container. The stylesheet references them with fallbacks to light mode defaults.
For per-subreddit overrides, inline styles are set on individual badges when a matching entry exists in the settings.
The content script listens for `browser.storage.onChanged` to apply color/dark-mode settings changes without requiring a page reload. For the master toggle (`enabled`), the page reloads to cleanly apply or remove all tweaks — this avoids complex teardown logic for a rare user action.
1.**Master toggle** — enable/disable the extension.
2.**Badge Colors** section with Light Mode and Dark Mode sub-sections, each showing:
- Subreddit badge: background, border, text color pickers
- Comments badge: background, border, text color pickers
- "Reset to defaults" button per mode
3.**Dark mode detection** dropdown: Auto (detect RES) / Force Light / Force Dark.
4.**Per-subreddit overrides** — add/remove list. Each entry: subreddit name text input + three color pickers for the subreddit badge.
5.**Reset all settings** button at the bottom.
Settings save immediately on change. Clean, minimal styling following Firefox extension popup conventions.
## Error Handling & Edge Cases
- **Missing elements:** If a post lacks a subreddit link (e.g., on a subreddit page where it's implicit) or comments link, that badge is skipped. No errors thrown.
- **Comment pages:** The main post at the top is a `div.thing.link` and gets badges. Comment entries are `div.thing.comment` and are excluded by the selector.
- **Zero comments:** When the original comments link text is `"comment"` (no number), the badge displays `"0 comments"` with the same link destination.
- **Extension disabled:** When `enabled` is toggled to `false`, the page reloads. The content script checks `enabled` on startup and exits early if `false`, leaving the page in its default state.
