Peeko

Peeko - Instant Webpage Previews

Peeko is a Chrome extension that provides instant previews of webpage content when users interact with links. It fetches and summarizes webpage data in real-time and displays a concise preview without requiring users to navigate away from the current page.

Features

Architecture

Peeko consists of two main components:

  1. Browser Extension: The frontend that users interact with
  2. Backend Server: Handles API requests to OpenAI and content extraction

Browser Extension

The extension is built with vanilla JavaScript and includes:

Backend Server

The Node.js backend server handles:

Installation

From Chrome Web Store (Coming Soon)

  1. Visit the Chrome Web Store
  2. Search for “Peeko” or use the direct link (TBD)
  3. Click “Add to Chrome”

Manual Installation (Developer Mode)

  1. Download or clone this repository
  2. Open Chrome and navigate to chrome://extensions/
  3. Enable “Developer mode” in the top-right corner
  4. Click “Load unpacked” and select the Peeko directory
  5. The extension should now be installed and active

Backend Server

  1. Clone this repository
  2. Navigate to the backend directory
  3. Install dependencies: npm install
  4. Create a .env file with your OpenAI API key (see backend/.env.example)
  5. Start the server: npm start

Usage Guide

Basic Usage

  1. Hover Previews: Simply hover over any link to see a preview
  2. Touch Devices: Long-press on a link to see the preview
  3. Keyboard Navigation: Focus on a link using Tab key to see the preview

Advanced Features

  1. Customizable Settings:
    • Click the Peeko icon in your browser toolbar
    • Adjust preview delay (default: 500ms)
    • Choose summary length (short, medium, long)
    • Select theme (light, dark, or auto)
    • Configure domain exclusions
    • Set Shift key requirement
  2. OpenAI Integration:
    • Enable in settings
    • Enter your OpenAI API key
    • Get AI-powered summaries
  3. Performance Tips:
    • Use domain exclusions for sites you don’t need previews for
    • Adjust preview delay to balance responsiveness and resource usage
    • Enable Shift key requirement to prevent accidental previews

Privacy Policy

Data Collection

Data Processing

Your Rights

Terms of Service

Usage Terms

  1. Acceptable Use:
    • Use the extension for personal browsing
    • Respect website terms of service
    • Do not use for automated scraping
    • Do not exceed rate limits
  2. API Usage:
    • OpenAI API usage is subject to OpenAI’s terms
    • Users are responsible for their own API costs
    • Rate limiting is enforced to prevent abuse
  3. Limitations:
    • No guarantee of preview availability
    • Some websites may block previews
    • Performance depends on network conditions
    • AI summaries may not be 100% accurate

Disclaimer

API Documentation

Backend API Endpoints

  1. Content Extraction: 
    POST /api/extract
Body: { url: string }
Response: { success: boolean, content: string, title: string }
  2. Summary Generation: 
    POST /api/summarize
Body: { url: string, content: string, title: string, apiKey: string }
Response: { success: boolean, summary: string }
  3. Status Check: 
    GET /api/status
Response: { success: boolean, timestamp: string }

Rate Limits

Error Codes

Support

License

MIT License - See LICENSE file for details

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

Development

Project Structure

peeko/
├── manifest.json             # Extension metadata & permissions
├── background.js             # Service worker for API requests & messaging
├── content.js                # Detects user interactions and triggers fetches
├── popup.js                  # Manages settings UI and user configurations
├── styles.css                # Styling for the popup and preview tooltip
├── icons/                    # Extension icons
├── services/
│   └── summarizationService.js  # Webpage content fetching & summarization
└── README.md                 # This file

Building from Source

  1. Clone the repository
  2. Make your changes
  3. Load the extension in developer mode as described in the installation section

To set up the development environment:

  1. Clone the repository
  2. Install backend dependencies: cd backend && npm install
  3. Start the backend server: npm run dev
  4. Load the extension in Chrome:
    • Go to chrome://extensions/
    • Enable “Developer mode”
    • Click “Load unpacked” and select the extension directory

Privacy & Security

License

MIT License - See LICENSE file for details

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request