Chrome Plugin Video Summarizer

A Chrome extension that extracts YouTube transcripts and generates concise, structured summaries using an optional local Flask backend powered by OpenAI.

Features

• Extracts captions/transcripts from YouTube videos (multiple strategies, with fallbacks)
• Sends transcript, title, and metadata to a local API for AI-generated summaries
• Displays a readable summary with key points in the popup/side panel
• Caches results in a MySQL database (optional, via the backend)
• Simple setup: load the extension unpacked; optional Python backend

Requirements

• Google Chrome (or Chromium-based browser) with Extension Developer Mode
• Optional Backend (recommended for AI summaries):
  • Python 3.10+
  • OpenAI API key
  • MySQL (optional, for caching)

Project Structure

• manifest.json: Extension manifest
• content/: Content script that runs on YouTube pages and extracts transcripts
• popup/: Popup UI (when clicking the extension icon)
• sidepanel/: Side panel UI (optional; opens from the extension icon)
• background/: Service worker handling API calls and coordination
• api/: Optional Flask backend using OpenAI and (optionally) MySQL for caching

Quick Start (Extension Only)

1. Clone or download this repository.
2. In Chrome, open chrome://extensions.
3. Enable "Developer mode" (top-right).
4. Click "Load unpacked" and select the project folder.
5. You should now see the extension in your toolbar.

Note: Without the backend running, the extension won’t be able to generate summaries (it needs an API). See the backend setup below.

Backend Setup (Flask + OpenAI) — Optional but Recommended

The extension expects a local API at http://localhost:5000/api. You can change this in background/background.js by editing API_BASE_URL.

1) Create and activate a virtual environment (recommended)

python -m venv .venv
. .venv/Scripts/activate  # Windows PowerShell
# source .venv/bin/activate  # macOS/Linux

2) Install dependencies

pip install -r api/requirements.txt

3) Configure environment variables

Create a .env file in the project root (or set these variables in your shell). Minimum required:

OPENAI_API_KEY=sk-...your-key...
# Optional overrides
OPENAI_MODEL=gpt-4o-mini

# Optional MySQL settings for caching
DB_HOST=127.0.0.1
DB_USER=root
DB_PASSWORD=
DB_NAME=verbai

4) (Optional) Create the MySQL table for caching

If you want to cache summaries, create a database (default name verbai) and table videodata similar to:

CREATE TABLE IF NOT EXISTS videodata (
  id BIGINT AUTO_INCREMENT PRIMARY KEY,
  video_id VARCHAR(64) NOT NULL,
  video_title VARCHAR(512) DEFAULT '' NOT NULL,
  description LONGTEXT NULL,
  transcript LONGTEXT NULL,
  transcript_json LONGTEXT NULL,
  ai_summary LONGTEXT NULL,
  ai_summaries_json LONGTEXT NULL,
  channel_info LONGTEXT NULL,
  status TINYINT DEFAULT 1 NOT NULL,
  called INT DEFAULT 1 NOT NULL,
  created_at TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  UNIQUE KEY uq_video_id (video_id)
);

If you don’t want caching, you can still run the backend without the database being available; DB operations are best-effort and will be skipped on failure.

5) Run the backend

python api/app.py

This starts Flask at http://localhost:5000. The extension will call POST http://localhost:5000/api/summerize to generate summaries.

Using the Extension

1. Open a YouTube video that has captions enabled.
2. Click the extension icon. The side panel and/or popup will appear.
3. Click “Summarize” to generate a new summary.
   • If the video has been summarized before and DB caching is enabled, the extension may show a cached result quickly.
4. Copy, read key points, and navigate timestamps as available.

Tips:

• If you see “Please open a YouTube video page”, refresh the tab and try again.
• Some videos don’t have transcripts; the extension will let you know if none can be found after retries.

Configuration

• Backend base URL: edit background/background.js:

const API_BASE_URL = "http://localhost:5000/api";

• OpenAI model: set OPENAI_MODEL in .env. Default: gpt-4o-mini.
• Database: set DB_* variables in .env. If not set or not reachable, the API still works without caching.

Troubleshooting

• No summary and an error about API key: ensure OPENAI_API_KEY is set and the backend is running.
• CORS errors in console: Flask adds permissive CORS headers; ensure you’re hitting http://localhost:5000 as configured.
• “No transcript available”: The video likely lacks captions. Try another video with captions.
• Nothing happens on click: Refresh the YouTube tab to ensure the content script is injected.
• Cache not working: Check your MySQL connection details and that the videodata table exists.

Privacy

• Transcript text and metadata are sent to your local backend for summarization.
• If DB is configured, summaries are stored locally for faster subsequent loads.

License

MIT (or your preferred license). Update this section as needed.

ChromePluginVideoSummarizer