Color Picker

Manifest V3 Chrome extension — pick colors with a sketch picker, sample from any page via the EyeDropper API, and save up to ten swatches in a palette persisted with chrome.storage.sync.

Features

• Sketch-style color picker with live RGBA readout
• Eyedropper — sample colors from the current page (EyeDropper API)
• Ten-slot palette — add, clear, and copy colors
• Palette persisted in chrome.storage.sync
• Light / dark theme (saved automatically)
• Spec-driven test suite — behaviors documented in docs/BEHAVIOR.md

Install (development)

git clone https://github.com/GeorgeNonis/color-picker-extension.git
cd color-picker-extension
npm install
npm run build

Load in Chrome:

1. Open chrome://extensions
2. Enable Developer mode
3. Load unpacked → select the dist folder (not dist/js)

Development

npm run watch    # rebuild on change — reload extension after each build
npm test         # run behavior specs (see docs/BEHAVIOR.md)
npm run package:zip   # build + color-picker.zip for Chrome Web Store upload

CI uploads the same .zip as a downloadable artifact on every green build.

Preview UI in a browser (chrome API mocked): serve dist/ and open js/preview.html.

Regenerate store graphics:

npm run capture:assets

Chrome Web Store

• Listing copy: docs/STORE_LISTING.md
• Graphic assets: docs/STORE_ASSETS.md + store_assets/

Stack

React 18 · TypeScript · react-color · Webpack · Manifest V3 · Chrome Storage API · Jest / Testing Library

Quality

Color helpers live in src/lib/colorUtils.ts with unit tests; UI behaviors map 1:1 to specs in docs/BEHAVIOR.md.

Roadmap

See ROADMAP.md for planned improvements.

Private AI context

Session state and store strategy live in private ai_context — see PROJECT_CONTEXT.md.