Skip to content

CLAUDE.md

Latest commit

 

History

History
85 lines (68 loc) · 4.04 KB

CLAUDE.md

File metadata and controls

85 lines (68 loc) · 4.04 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

Summarize Web is a browser web extension (Chrome/Firefox) that allows users to quickly summarize web content using AI services (Venice.ai, ChatGPT, Claude, and Mistral). The extension provides context menu integration and content scripts for different platforms.

Common Commands

npm install                    # Install dependencies
npm run build                  # Build the extension (~30 seconds)
npm run dev                    # Development mode with file watching
npm run format                 # Format all files using Biome
npm run lint                   # Check for linting/formatting issues

Build Validation

After npm run build, verify these files exist in dist/:

  • background.js
  • contentScript_chatgpt.js, contentScript_claude.js, contentScript_mistral.js, contentScript_venice.js
  • contentScript_pageContent.js, contentScript_youtube.js
  • manifest.json
  • icons/ directory

Architecture

Message Passing Flow

  1. User Action: Right-click context menu triggers in any web page
  2. Background Script (background.ts): Handles context menu creation and routing
  3. Content Extraction: Sends GET_CONTENT message to active tab's content script
  4. Content Scripts: Extract content based on page type (YouTube vs. regular web page)
  5. AI Platform Integration: Opens AI platform tab and sends ACTION_SUMMARIZE message
  6. Platform Content Scripts: Inject prompt and content into AI platform's UI

Content Scripts by Purpose

  • Platform Integration Scripts: Inject content into AI platforms (venice, claude, chatgpt, mistral)
    • Each implements the same pattern: receive message, update editor, upload file attachment, submit
    • Platform-specific selectors for finding editor elements and submit buttons
  • Content Extraction Scripts:
    • contentScript_pageContent.ts: Extracts content from regular web pages using Mozilla Readability
    • contentScript_youtube.ts: Extracts YouTube-specific content (transcripts, video info)

Key Files

  • manifest.json: Extension manifest with content script URL patterns
  • background.ts: Context menu creation and message routing
  • types.ts: Zod schemas for runtime validation of messages (GET_CONTENT, ACTION_SUMMARIZE)
  • utils.ts: Common utilities (querySelectorAsync, waitFor, openTab, getTabId)
  • dom-utils.ts: DOM manipulation utilities for simulating file uploads
  • prompt.ts: Standardized AI summarization prompt template

Technology Stack

  • Build: Vite with vite-plugin-web-extension
  • Language: TypeScript (ESM modules)
  • Extension API: webextension-polyfill for cross-browser compatibility
  • Content Extraction: @mozilla/readability for web page parsing
  • Validation: Zod for runtime type checking
  • Linting/Formatting: Biome

Development Notes

Testing Limitations

  • This project has NO automated test framework
  • Extension requires browser environment for full functionality testing
  • In sandboxed environments, only validate build processes and code structure
  • Manual testing requires loading unpacked extension in Chrome/Firefox Developer Mode

Code Quality

  • Always run npm run format before committing
  • Only run Biome on src/ directory, never on dist/ (autogenerated files)
  • Ensure npm run build succeeds before submitting changes

Common Patterns

  • All platform content scripts use similar structure: receive message → update editor → upload file → submit
  • Content extraction uses GET_CONTENT message, AI injection uses ACTION_SUMMARIZE message
  • DOM manipulation utilities handle file upload simulation for platforms requiring file attachments
  • querySelectorAsync and waitFor utilities handle asynchronous DOM interactions

Extension Manifest (v3)

  • Permissions: contextMenus, downloads
  • Content scripts match specific AI platform URLs
  • General content script matches all HTTP/HTTPS except YouTube
  • Separate YouTube content script for video-specific handling