Clipper - Browser Text Highlighting Extension

Clipper is a browser extension that lets you save and manage highlighted text from any webpage. It's a handy tool for collecting important quotes, snippets, or references while browsing the web.

Features

• Text Highlighting: Select text on any webpage and save it with a single click
• Organized Collection: All your saved highlights are stored in one convenient place
• Website Context: Each highlight saves the source URL and page title for reference
• Dark/Light Mode: Switch between themes to suit your preference
• Responsive Design: Clean UI built with React and Tailwind CSS

Technology Stack

• Frontend: React 19 with TanStack Router for navigation
• Styling: Tailwind CSS with shadcn/ui components
• Build Tools: Vite and TypeScript
• Extension APIs: Chrome Extension API for browser integration

Project Structure

• /src/background: Background service worker for the extension
• /src/content: Content scripts that run on webpages
• /src/components: Reusable UI components
• /src/routes: Application pages (main view and settings)
• /src/lib: Utility functions and type definitions

Getting Started

Prerequisites

• Node.js (v18+)
• npm

Installation

1. Clone the repository

git clone <repository-url>
cd clipper

2. Install dependencies

npm install

3. Development

npm run dev

4. Build for production

npm run build:extension

Loading the extension in Chrome

1. Open Chrome and navigate to chrome://extensions
2. Enable "Developer mode"
3. Click "Load unpacked" and select the dist directory that was created during the build process

Usage

1. Navigate to any webpage
2. Select text you want to save
3. Click the "Save" button that appears
4. Click on the Clipper extension icon to view all your saved highlights
5. Use the settings menu to toggle between dark and light mode

License

MIT