AI-Powered Content Summarization Chrome Extension

A powerful Chrome extension that uses AI to summarize webpages, YouTube videos, and email threads. Built with React, TypeScript, and modern web technologies.

Features

• Multi-format Summarization: Supports webpages, YouTube videos, and email threads
• Multiple Summary Lengths: Choose from short (one sentence), medium (bullet points), or detailed summaries
• AI-Powered Q&A: Ask questions about any content on the page
• Smart Highlighting: Automatically highlight keywords and key points
• Integration Support: Save summaries to Notion and Evernote
• Modern UI: Clean, responsive interface built with React and Tailwind CSS

Technology Stack

• Frontend: React 18 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• AI Service: OpenAI GPT-3.5-turbo
• Extension API: Chrome Extension Manifest V3
• Icons: Lucide React

Installation

Development Setup

1. Clone the repository:

   git clone <repository-url>
   cd AI-Powered-Content-Summarization

2. Install dependencies:

   npm install

3. Build the extension:

   npm run build

4. Load in Chrome:

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked" and select the dist folder

Production Build

npm run build

Configuration

OpenAI API Key

1. Get your API key from OpenAI Platform
2. Open the extension options page
3. Enter your API key in the configuration section

Optional Integrations

Notion Integration

• Get a Notion integration token
• Provide your database ID for saving summaries

Evernote Integration

• Set up Evernote developer access
• Configure your access token and notebook

Usage

Basic Summarization

1. Navigate to any webpage, YouTube video, or email thread
2. Click the extension icon in the toolbar
3. Choose your preferred summary length
4. Click "Summarize" to generate an AI summary

Ask Questions

1. Go to the Q&A tab in the extension popup
2. Type your question about the current page content
3. Get AI-powered answers based on the content

Highlighting

• Enable auto-highlighting in settings to automatically highlight keywords
• Use the highlight/clear buttons to manually control highlighting

Save to Note-taking Apps

• Configure Notion or Evernote in the extension options
• Summaries will be automatically saved to your configured apps

Development

Project Structure

src/
├── background/         # Background script
├── content/           # Content script
├── popup/             # Extension popup UI
├── options/           # Options page UI
├── services/          # AI and integration services
├── types/             # TypeScript definitions
└── utils/             # Utility functions

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint
• npm run lint:fix - Fix linting issues
• npm run type-check - Run TypeScript checks

Key Components

• ContentExtractor: Extracts content from different types of pages
• AIService: Handles OpenAI API communication
• StorageService: Manages extension storage and settings
• YouTubeService: Specialized YouTube content extraction
• EmailService: Specialized email thread extraction

Privacy & Security

• All AI processing is done through OpenAI's API
• Your API key is stored locally and never shared
• Content extraction happens locally in your browser
• Optional integrations require your explicit consent and configuration

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

License

MIT License - see LICENSE file for details

Support

For issues and feature requests, please use the GitHub issue tracker.

Roadmap

• Support for more content types (PDFs, documents)
• Additional AI models and providers
• More note-taking app integrations
• Advanced filtering and search capabilities
• Collaborative features
• Mobile browser support