Page Summarizer Chrome Extension

A Chrome extension that uses AI to summarize web page content. Built with React, Vite, NestJS, and OpenAI.

Project Structure

neoai/
├── backend/          # NestJS backend with hexagonal architecture
│   ├── src/
│   │   ├── domain/           # Domain layer (ports)
│   │   ├── application/      # Application layer (services, DTOs)
│   │   ├── infrastructure/   # Infrastructure layer (OpenAI adapter)
│   │   └── adapters/         # HTTP adapters (controllers)
│   ├── .env                  # Environment variables
│   └── package.json
│
└── frontend/         # React + Vite Chrome extension
    ├── src/
    │   ├── App.tsx          # Main popup component
    │   └── index.css        # Tailwind CSS styles
    ├── public/
    │   ├── manifest.json    # Chrome extension manifest
    │   └── icon*.png        # Extension icons
    └── package.json

Setup Instructions

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Install dependencies (already done):

npm install

3. The .env file is already configured with the OpenAI API key.

4. Start the backend server:

npm run start:dev

The backend will run on http://localhost:3000.

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies (already done):

npm install

3. Build the extension:

npm run build

This will create a dist/ directory with the Chrome extension files.

Loading the Extension in Chrome

1. Build the frontend:

cd frontend
npm run build

2. Open Chrome and navigate to chrome://extensions/

3. Enable "Developer mode" (toggle in the top right)

4. Click "Load unpacked"

5. Select the frontend/dist/ directory

6. The extension should now appear in your extensions list

Usage

1. Make sure the backend is running (cd backend && npm run start:dev)

2. Navigate to any web page in Chrome

3. Click the extension icon in the Chrome toolbar

4. Click "Summarize This Page" button

5. Wait for the AI to generate a summary

6. The summary will be displayed in the popup

Development

Backend Development

The backend follows hexagonal architecture:

• Domain Layer (src/domain/): Contains ports (interfaces)
• Application Layer (src/application/): Contains services and DTOs
• Infrastructure Layer (src/infrastructure/): Contains external service adapters (OpenAI)
• Adapters Layer (src/adapters/): Contains HTTP controllers

To modify the summarization logic, edit:

• backend/src/infrastructure/openai/openai.adapter.ts

Frontend Development

The frontend is a simple React app with Tailwind CSS:

• Main component: frontend/src/App.tsx
• Styles: frontend/src/index.css
• Manifest: frontend/public/manifest.json

To modify the UI, edit App.tsx. The component:

1. Extracts page content using Chrome APIs
2. Sends it to the backend
3. Displays the summary

Build Configuration

The Vite configuration (frontend/vite.config.ts) is set up to:

• Build the extension files to dist/
• Copy manifest.json and icons to the output directory
• Bundle all assets correctly for Chrome

API Endpoints

POST /summarize

Summarizes the provided content using OpenAI.

Request:

{
  "content": "Page content to summarize..."
}

Response:

{
  "summary": "AI-generated summary..."
}

Technologies Used

Backend

• NestJS - Node.js framework
• OpenAI API - AI summarization
• TypeScript
• Hexagonal architecture pattern

Frontend

• React - UI library
• Vite - Build tool
• Tailwind CSS - Styling
• Chrome Extension APIs
• TypeScript

Notes

• The backend must be running for the extension to work
• The OpenAI API key is configured in backend/.env
• For production, add proper error handling and rate limiting
• Icon placeholders are included; replace with actual icons for production
• CORS is enabled on the backend for development

Troubleshooting

Extension not loading:

• Make sure you ran npm run build in the frontend directory
• Check that manifest.json is in the dist/ folder

Summarization fails:

• Ensure the backend is running on http://localhost:3000
• Check the browser console for errors
• Verify the OpenAI API key is valid in backend/.env

Build errors:

• Delete node_modules and package-lock.json
• Run npm install again
• Make sure you're using a recent Node.js version (16+)