A Chrome & Firefox new-tab extension that surfaces a fresh set of color palettes (via ColourLovers) and fonts (via Google Fonts) every time you open a new tab.

This is a maintained fork of the original tholman/palettab by Claudio Guglieri & Tim Holman, updated for the current Chrome extension ecosystem:

• Manifest V3 — migrated from the deprecated MV2 so it loads in modern Chrome.
• Light & dark builds — the extension and landing page ship as two variants from one source: the original light look and a dark theme, each with all the fixes/modernizations. The dark styling and dynamic per-swatch text color come from efskap/palettab-dark.
• Modernized code — standard (unprefixed) CSS and ES2015+ JS, navigator.clipboard for hex copy; no reliance on Firefox's -webkit- compatibility layer.
• Modern new-tab indicator — the landing page's old Chrome "+" image is now an inline, theme-aware SVG.

Lineage: tholman/palettab → efskap's dark edit + dynamic text color → this Manifest V3 fork.

Extension (new tab):

Landing page:

app/     the browser extension (chrome_url_overrides newtab page)
site/    the marketing / landing page

• Chrome: Chrome Web Store
• Firefox: Firefox Add-ons

Note: the store listings still point at the original upstream extension.

Chrome

1. Visit chrome://extensions.
2. Enable Developer mode (top right).
3. Click Load unpacked and select app/ (dark, the default source) — or run ./scripts/build.sh and select dist/extension-light / dist/extension-dark.
4. Open a new tab.

There is no background service worker to inspect — Palettab is only a new-tab override page, with no background context, content scripts, popup or options page, so nothing runs outside the new-tab page itself.

Firefox

1. Visit about:debugging#/runtime/this-firefox.
2. Click Load Temporary Add-on… and select app/manifest.json.
3. Open a new tab.

One script compiles both themes and assembles ready-to-use packages:

./scripts/build.sh

Output (git-ignored):

dist/extension-dark    dist/extension-light    # load-unpacked / zip for the stores
dist/site-dark         dist/site-light         # deployable static site

The extension packages get a per-variant manifest.json — name "Palettab" / gecko id @palettab-newtab (light) vs "Palettab (Dark)" / @palettab-newtab-dark (dark) — so both can be installed side by side in Firefox.

Styles are SCSS; any Dart Sass works (a version pinned for older Node is shown). Each project has a themeless _base.scss plus _theme-light.scss / _theme-dark.scss, combined by the light.scss / dark.scss entry points:

# compile a single variant by hand (build.sh does all four)
npx sass app/scss/dark.scss  app/css/styles.css
npx sass app/scss/light.scss app/css/styles.light.css

# preview the site
python3 -m http.server 8123 --directory site   # then open http://localhost:8123

Colors are driven by a :root token set (_theme-*.scss), mirrored between the extension and the site. The extension's page-fade background is read from --color-bg in app/js/palettab.js, so no per-variant JS is needed.

Per-swatch hex labels pick dark or light text automatically via textColorFor() in app/js/palettab.js (ITU-R BT.709 luma) — independent of the page theme.

Run ./scripts/build.sh, then zip the contents of dist/extension-light or dist/extension-dark and upload to the target store's developer dashboard.

• Manifest V3 (manifest_version: 3), browser_specific_settings.gecko for Firefox, permissions: [], and an icons block.
• Light and dark builds from one tokenized source (scripts/build.sh).
• Standard, unprefixed CSS and ES2015+ JS (navigator.clipboard, animationend), so nothing depends on Firefox's -webkit- compat layer.
• Landing-page new-tab indicator replaced with an inline SVG.

The MIT License (MIT). Original work © Tim Holman & Claudio Guglieri.