ContextLens

ContextLens is a Chrome extension and local FastAPI backend that helps users inspect news screenshots, extract the text, search for source context, and return an evidence-focused summary.

Project Structure

firstspark/
  backend/
    ocr.py                 # FastAPI OCR and context-analysis API
    context_analyzer.py    # OpenAI source-context analysis
  chrome-extension/
    src/                   # React extension source
    public/manifest.json   # Manifest copied into builds
    dist/                  # Built extension loaded by Chrome
  requirements.txt         # Python backend dependencies
  .env                     # Local environment variables

Prerequisites

• Python 3.11+ recommended
• Node.js 20+ recommended
• Google Chrome
• An OpenAI API key

1. Set Up The Backend

From the project root

Create and activate a virtual environment:

python -m venv venv
.\venv\Scripts\Activate.ps1

Install Python dependencies:

pip install -r requirements.txt

Create or update .env in the project root:

OPENAI_API_KEY=your_openai_api_key_here

Start the backend server:

uvicorn backend.ocr:app --host 127.0.0.1 --port 8000 --reload

Check that the backend is running:

curl http://localhost:8000/health

Expected response:

{"status":"ok"}

The extension sends image OCR requests to:

http://localhost:8000/ocr

Keep this terminal open while using the extension.

2. Set Up The Chrome Extension

Open a second terminal:

Install frontend dependencies:

npm install

Build the extension:

npm run build

This creates or updates:

chrome-extension/dist/

3. Load The Extension In Chrome

1. Open Chrome.
2. Go to:

chrome://extensions

3. Turn on Developer mode in the top-right corner.
4. Click Load unpacked.
5. Select this folder:

*\dist

6. Pin ContextLens from the Chrome extensions menu if you want easy access.

4. Using ContextLens

1. Make sure the backend server is still running on localhost:8000.
2. Click the ContextLens extension icon in Chrome.
3. Upload a screenshot or paste an image URL.
4. Click Extract context.
5. Wait for the extension to:
   • extract text from the image,
   • identify the main claim,
   • search for original source context,
   • compare the screenshot with the fuller context,
   • return a visual evidence summary.

Development Commands

Backend:

uvicorn backend.ocr:app --host 127.0.0.1 --port 8000 --reload

Build extension for Chrome:

npm run build

Type-check extension:

npm run type-check

Troubleshooting

Extension says the request failed

Make sure the backend is running:

curl http://localhost:8000/health

If it is not running, restart:

uvicorn backend.ocr:app --host 127.0.0.1 --port 8000 --reload

OpenAI API key error

Check that .env exists in the project root and contains:

OPENAI_API_KEY=your_openai_api_key_here

Then stop and restart the backend server.

Chrome does not show latest changes

After editing frontend code:

npm run build

Then go to chrome://extensions and click the reload button on the ContextLens extension card.

Port 8000 is already in use

Stop the process using port 8000, or run the backend on another port and update API_URL in:

chrome-extension/src/background.ts

Then rebuild and reload the extension.

Notes

• The backend uses PaddleOCR for text extraction and OpenAI for source-context analysis.
• The Chrome extension is configured for Manifest V3.
• The built extension folder to load into Chrome is chrome-extension/dist, not chrome-extension/src.