🔹 AI Summarizer & Q&A Browser Extension (MERN Stack)

A powerful browser extension that extracts text from any webpage, generates AI-powered summaries, and allows intelligent Q&A using embeddings and similarity search.

🚀 Features

• 📄 Smart Text Extraction: Automatically extracts main content from web pages using intelligent selectors
• 🤖 AI-Powered Summaries: Generate concise, informative summaries using OpenAI's GPT models
• 💬 Intelligent Q&A: Ask questions about page content using embedding-based similarity search
• 🔄 SPA Support: Works with Single Page Applications using MutationObserver
• 🎨 Modern UI: Clean, responsive interface built with React and Tailwind CSS
• 🔧 Cross-Browser: Works on Chrome, Edge, and Firefox
• ⚡ Real-time Processing: Automatic content extraction and processing

🏗️ Architecture

Backend (Node.js + Express + MongoDB)

• Embeddings API: Process and store page content with OpenAI embeddings
• Summary API: Generate page summaries using GPT models
• Q&A API: Answer questions using similarity search and context retrieval
• MongoDB Storage: Store page chunks with embeddings for efficient retrieval

Browser Extension (Manifest v3)

• Content Script: Extracts text from web pages with SPA support
• Background Service Worker: Handles communication and data processing
• React Popup: Modern UI for summaries and Q&A interface
• Cross-browser Compatibility: Works on Chrome, Edge, and Firefox

📁 Project Structure

AIExtension/
├── backend/                 # Node.js + Express backend
│   ├── models/
│   │   └── PageChunk.js    # MongoDB schema for page chunks
│   ├── routes/
│   │   ├── embeddings.js   # Handle text processing and embeddings
│   │   ├── summary.js      # Generate page summaries
│   │   └── ask.js          # Q&A functionality
│   ├── utils/
│   │   ├── chunkText.js    # Text chunking utilities
│   │   └── cosineSimilarity.js # Similarity search functions
│   ├── server.js           # Main Express server
│   ├── package.json        # Backend dependencies
│   └── env.example         # Environment variables template
├── extension/              # Browser extension
│   ├── popup/              # React popup application
│   │   ├── src/
│   │   │   ├── components/
│   │   │   │   ├── SummaryView.jsx
│   │   │   │   ├── ChatView.jsx
│   │   │   │   └── SettingsView.jsx
│   │   │   ├── App.jsx
│   │   │   └── main.jsx
│   │   ├── package.json    # Popup dependencies
│   │   └── vite.config.js  # Build configuration
│   ├── manifest.json       # Extension manifest
│   ├── background.js       # Service worker
│   └── contentScript.js    # Content extraction script
└── README.md              # This file

🛠️ Setup Instructions

Prerequisites

• Node.js (v16 or higher)
• MongoDB (local or cloud)
• OpenAI API key
• Modern browser (Chrome, Edge, or Firefox)

1. Backend Setup

# Navigate to backend directory
cd backend

# Install dependencies
npm install

# Create environment file
cp env.example .env

# Edit .env file with your configuration
# Add your OpenAI API key and MongoDB URI

Environment Variables (.env):

OPENAI_API_KEY=your_openai_api_key_here
MONGO_URI=mongodb://localhost:27017/summarizer_extension
PORT=5000
NODE_ENV=development

# Start the backend server
npm run dev

# The server will be running on http://localhost:5000

2. Extension Setup

# Navigate to extension popup directory
cd extension/popup

# Install dependencies
npm install

# Build the popup
npm run build

# The built files will be in extension/dist/

3. Load Extension in Browser

Chrome/Edge:

1. Open chrome://extensions/
2. Enable "Developer mode"
3. Click "Load unpacked"
4. Select the extension folder
5. The extension should now appear in your toolbar

Firefox:

1. Open about:debugging#/runtime/this-firefox
2. Click "Load Temporary Add-on"
3. Select the manifest.json file from the extension folder

4. Configure Extension

1. Click the extension icon in your browser
2. Go to the Settings tab
3. Verify the backend URL (default: http://localhost:5000)
4. Test the connection
5. Enable auto-extract if desired

🎯 Usage

Basic Workflow:

1. Navigate to any webpage - The extension automatically extracts content
2. Click the extension icon - Opens the popup with three tabs
3. Summary Tab - View AI-generated summary of the page
4. Q&A Tab - Ask questions about the page content
5. Settings Tab - Configure backend URL and preferences

Example Use Cases:

• Research: Quickly summarize long articles and ask specific questions
• Learning: Extract key points from educational content
• News: Get summaries of news articles and ask follow-up questions
• Documentation: Understand technical documentation faster

🔧 API Endpoints

Backend API (http://localhost:5000)

POST /api/embeddings

Process page text and generate embeddings

{
  "page_url": "https://example.com",
  "text": "Page content...",
  "title": "Page Title"
}

POST /api/summary

Generate page summary

{
  "page_url": "https://example.com"
}

POST /api/ask

Answer questions about page content

{
  "page_url": "https://example.com",
  "question": "What is the main topic?"
}

GET /health

Health check endpoint

🎨 Customization

Styling

• Modify extension/popup/src/index.css for custom styles
• Update extension/popup/tailwind.config.js for theme customization

Backend Configuration

• Adjust chunk sizes in backend/utils/chunkText.js
• Modify similarity search parameters in backend/utils/cosineSimilarity.js
• Update OpenAI model settings in route files

Extension Features

• Add new tabs in extension/popup/src/App.jsx
• Modify content extraction logic in extension/contentScript.js
• Update permissions in extension/manifest.json

🚀 Deployment

Backend Deployment

1. Set up MongoDB (local or cloud)
2. Deploy to your preferred platform (Heroku, Vercel, AWS, etc.)
3. Update environment variables
4. Update extension settings with new backend URL

Extension Distribution

1. Build the popup: cd extension/popup && npm run build
2. Create a ZIP file of the extension folder
3. Submit to browser extension stores (Chrome Web Store, Firefox Add-ons)

🔍 Troubleshooting

Common Issues:

Backend Connection Failed:

• Check if backend server is running
• Verify MongoDB connection
• Ensure OpenAI API key is valid
• Check CORS settings

Extension Not Working:

• Verify extension is loaded in browser
• Check browser console for errors
• Ensure backend URL is correct in settings
• Test with a simple webpage first

Content Not Extracting:

• Check if page has sufficient text content
• Verify content script permissions
• Try refreshing the page
• Check browser console for errors

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

• OpenAI for GPT models and embeddings
• React and Tailwind CSS for the UI
• Chrome Extension Manifest v3
• MongoDB for data storage

---

Happy summarizing and questioning! 🎉