ai-chrome-extension — Product Development Request

What I Want to Build

A Chrome extension that summarizes long articles and blog posts using AI. Click the extension icon on any page, get a 3-bullet summary instantly. Save summaries for later reading.

Additional Context

Should work on any webpage with article content. No API key required from users — use a free-tier AI API on the backend. Clean popup UI, not a sidebar.

Key Features

• One-click article summarization
• 3-bullet summary format
• Save summaries to history
• Popup UI with clean design
• Works on any article/blog page
• Keyboard shortcut (Alt+S)

Tech Stack Preferences

Chrome Extension Manifest V3, TypeScript, Tailwind CSS, Cloudflare Workers

Architecture

• Content Script: Uses Mozilla's Readability.js to extract article body text
• Background Service Worker: Receives extracted text, calls backend API, manages chrome.storage
• Popup UI: 400x500px popup — shows summary or "Summarize this page" button
• History Page: Full-page tab with list of saved summaries, searchable
• Backend: Cloudflare Worker at /api/summarize — proxies to Claude API

Extension Structure

src/
├── manifest.json
├── content.ts             # Article extraction
├── background.ts          # Service worker
├── popup/
│   ├── popup.html
│   ├── popup.ts
│   └── popup.css
├── history/
│   ├── history.html       # chrome_url_overrides or new tab
│   ├── history.ts
│   └── history.css
└── utils/
    └── storage.ts         # Chrome storage wrapper

Please help me build this product based on the requirements above.

Progress

• Manifest V3 setup + project scaffolding
• Content script with Readability.js extraction
• Popup UI (loading state + summary display)
• Cloudflare Worker backend
• One-click summarize flow working end-to-end
• Save summaries to chrome.storage.local
• History page with saved summaries list
• Keyboard shortcut (Alt+S)
• Chrome Web Store submission
• Rate limiting on backend (prevent abuse)

Snapshot Log

v1 - Initial Plan

• Defined product idea: one-click article summarization
• Chose Manifest V3 + Cloudflare Workers architecture

v2 - Core Summarization Working

• Built content script with Readability.js
• Created popup UI with loading spinner and summary display
• Deployed Cloudflare Worker backend
• End-to-end flow working on Medium, dev.to, HN articles

v3 - History + Keyboard Shortcut

• Added chrome.storage.local for saving summaries (page title + URL + bullets + timestamp)
• Built history page: lists all saved summaries, click to revisit original article
• Added search/filter in history page
• Implemented Alt+S keyboard shortcut via manifest commands
• Added "Copy summary" button to popup
• Fixed: Readability.js failing on some paywall sites — now shows friendly error

ai-chrome-extension — Product Development Request

What I Want to Build

A Chrome extension that summarizes long articles and blog posts using AI. Click the extension icon on any page, get a 3-bullet summary instantly. Save summaries for later reading.

Additional Context

Should work on any webpage with article content. No API key required from users — use a free-tier AI API on the backend. Clean popup UI, not a sidebar.

Key Features

• One-click article summarization
• 3-bullet summary format
• Save summaries to history
• Popup UI with clean design
• Works on any article/blog page
• Keyboard shortcut (Alt+S)

Tech Stack Preferences

Chrome Extension Manifest V3, TypeScript, Tailwind CSS, Cloudflare Workers

Architecture

• Content Script: Uses Mozilla's Readability.js to extract article body text, stripping ads/nav/footer
• Background Service Worker: Receives extracted text, calls backend API
• Popup UI: 400x500px popup with loading spinner → 3 bullet points + copy button
• Backend: Cloudflare Worker at /api/summarize — proxies to Claude API with system prompt for 3-bullet summaries. Hides API key from users.

Extension Structure

src/
├── manifest.json          # Manifest V3
├── content.ts             # Article extraction (Readability.js)
├── background.ts          # Service worker — API calls
├── popup/
│   ├── popup.html
│   ├── popup.ts           # Summary display logic
│   └── popup.css          # Tailwind compiled
└── utils/
    └── storage.ts         # Chrome storage API wrapper

Please help me build this product based on the requirements above.

Progress

• Manifest V3 setup + project scaffolding
• Content script with Readability.js extraction
• Popup UI (loading state + summary display)
• Cloudflare Worker backend (proxies to Claude API)
• One-click summarize flow working end-to-end
• Save summaries to chrome.storage.local
• History page (list of saved summaries)
• Keyboard shortcut (Alt+S)
• Chrome Web Store submission

Snapshot Log

v1 - Initial Plan

• Defined product idea: one-click article summarization
• Chose Manifest V3 + Cloudflare Workers architecture

v2 - Core Summarization Working

• Built content script with Readability.js — extracts clean article text
• Created popup UI with loading spinner and 3-bullet summary display
• Deployed Cloudflare Worker backend that calls Claude API
• End-to-end flow: click icon → extract → summarize → display. Works!
• Tested on Medium, dev.to, Hacker News articles

ai-chrome-extension — Product Development Request

What I Want to Build

A Chrome extension that summarizes long articles and blog posts using AI. Click the extension icon on any page, get a 3-bullet summary instantly. Save summaries for later reading.

Additional Context

Should work on any webpage with article content. No API key required from users — use a free-tier AI API on the backend. Clean popup UI, not a sidebar.

Key Features

• One-click article summarization
• 3-bullet summary format
• Save summaries to history
• Popup UI with clean design
• Works on any article/blog page
• Keyboard shortcut (Alt+S)

Tech Stack Preferences

Chrome Extension Manifest V3, TypeScript, Tailwind CSS

Please help me build this product based on the requirements above.

1. First, review the requirements and ask if anything is unclear.
2. Propose a technical architecture.
3. Outline the implementation steps.
4. Start coding from the first step.

I'll confirm progress at each step before moving to the next.

Documentation Rule

Important: Update this document (located at .pmpt/docs/pmpt.md) at these moments:

• When architecture or tech decisions are finalized
• When a feature is implemented (mark as done)
• When a development phase is completed
• When requirements change or new decisions are made