Skip to content

inhaq/prida

BranchesTags

Repository files navigation

PrIDA - Personal Information Digital Assistant

A powerful Chrome extension that uses AI to automatically fill forms, rewrite text, and proofread content based on your personal profile and context. Built with React, TypeScript, and Chrome's built-in Gemini Nano AI.

🚀 Features

Core Features

  • 🤖 AI-Powered Auto-Fill: Automatically suggests answers for form fields using Chrome's on-device AI
  • ✍️ Text Rewriting: Rewrite selected text to improve clarity, tone, and style using Gemini Nano's Rewriter API
  • 📖 Text Proofreading: Automatically detect and correct grammar, spelling, and punctuation errors with the Proofreader API
  • 📝 Context-Aware: Extracts relevant context from webpages to provide better suggestions
  • 🔒 Privacy-First: All data stored locally using IndexedDB, AI runs on-device (no cloud)
  • 👤 Profile Management: Create and manage multiple profiles with different contexts (job, medical, personal, etc.)
  • 💬 Chat Interface: Ask questions about your profile data with natural language
  • 🎯 Context Menu Integration: Right-click on any text field for quick access to AI features

Technical Stack

  • ⚛️ React 18 with TypeScript
  • 🎨 Tailwind CSS with custom styling
  • 📦 Vite for fast development and building
  • 🔧 Chrome Extension Manifest V3
  • 🧠 Chrome's Gemini Nano (on-device AI)
  • 💾 IndexedDB for local data storage

✨ Feature Details

1. AI-Powered Auto-Fill

The extension injects a small AI-powered icon into text inputs, textareas, and contenteditable fields across all websites. When clicked:

  1. Label Detection: Automatically detects the field's label from various sources (label tag, aria-label, placeholder, etc.)
  2. Context Extraction: Analyzes nearby webpage text to understand what information is being requested
  3. AI Generation: Combines your profile data with the page context to generate a relevant answer
  4. Preview & Accept: Shows a preview modal where you can accept or reject the suggestion

Supported Field Types:

  • Text inputs (text, email, tel, url)
  • Textareas
  • Contenteditable elements (Rich text editors, LinkedIn composer, etc.)

Example Use Cases:

  • Job application forms
  • Contact forms
  • Profile creation pages
  • Survey responses
  • Any web form requiring personal information

2. Text Rewriting (Gemini Nano Rewriter API)

Right-click on any selected text and choose "Rewrite with PridaAI" to:

  • Improve Clarity: Simplify complex sentences while maintaining meaning
  • Adjust Tone: Maintain "as-is" tone or customize via API options
  • Preserve Format: Keep the original formatting and structure
  • Real-time Processing: Uses Chrome's on-device streaming API for instant results

How it Works:

  1. Select any text in an input field, textarea, or contenteditable element
  2. Right-click and choose "Rewrite with PridaAI"
  3. The AI processes the text using Gemini Nano's Rewriter API
  4. Text is automatically replaced with the improved version
  5. Works completely offline - no data sent to cloud

Configuration Options:

  • tone: "as-is" (maintains original tone)
  • length: "as-is" (maintains original length)
  • format: "as-is" (maintains original format)

3. Text Proofreading (Gemini Nano Proofreader API)

Right-click on any selected text and choose "Proofread with PridaAI" to:

  • Grammar Correction: Automatically fix grammatical errors
  • Spelling Check: Detect and correct spelling mistakes
  • Punctuation: Ensure proper punctuation usage
  • Instant Feedback: Get corrections in real-time

How it Works:

  1. Select any text in an input field, textarea, or contenteditable element
  2. Right-click and choose "Proofread with PridaAI"
  3. The AI analyzes the text using Gemini Nano's Proofreader API
  4. Text is automatically corrected and replaced
  5. Returns correctedInput with all fixes applied

Features:

  • On-device processing (completely private)
  • No network requests required
  • Streaming API support for better performance
  • Works on all editable elements

4. Context Menu Integration

Three powerful context menu options available on all web pages:

  1. Ask PridaAI: Generate content based on your profile and page context
  2. Rewrite with PridaAI: Improve selected text with AI rewriting
  3. Proofread with PridaAI: Correct grammar and spelling errors

All features work seamlessly with:

  • Standard HTML inputs and textareas
  • Rich text editors (contenteditable)
  • Platform-specific editors (LinkedIn, Gmail, etc.)

📁 Project Structure

prida/
├── src/
│   ├── components/                 # UI Components
│   │   ├── Header.tsx             # Top navigation bar
│   │   ├── Footer.tsx             # Bottom footer with links
│   │   ├── MainContent.tsx        # Main tab container
│   │   ├── Card.tsx               # Reusable card component
│   │   ├── DataProfileTabNew.tsx  # Profile management interface
│   │   ├── ChatTab.tsx            # Chat interface for querying profiles
│   │   ├── SettingsTab.tsx        # Settings and configuration
│   │   └── AISetupInstructions.tsx # Setup guide for Chrome AI
│   ├── content/                    # Content Script Components
│   │   ├── contentScript.tsx      # Main content script (Auto-Fill, Rewrite, Proofread)
│   │   └── FormFillIcon.tsx       # AI icon injected into forms
│   ├── utils/                      # Utility Functions
│   │   ├── aiRetrieval.ts         # AI prompt generation and retrieval
│   │   ├── pageContextExtractor.ts # Extract context from webpages
│   │   ├── db.ts                  # IndexedDB operations
│   │   └── domainProfileStorage.ts # Domain-to-profile mapping
│   ├── App.tsx                     # Root application component
│   ├── index.tsx                   # Application entry point
│   └── index.css                   # Global styles with Tailwind
├── public/
│   ├── icons/                      # Extension icons (16, 32, 48, 128px)
│   ├── manifest.json              # Chrome extension manifest
│   └── background.js              # Background service worker
├── index.html                      # Extension popup HTML
├── vite.config.ts                 # Vite configuration
├── vite.content.config.ts         # Content script build config
├── tailwind.config.js             # Tailwind CSS configuration
├── tsconfig.json                  # TypeScript configuration
└── package.json                   # Project dependencies

🛠️ Setup & Installation

Prerequisites

  • Chrome browser (version 127+) with Gemini Nano AI enabled
  • Enable Chrome AI APIs: Navigate to the following Chrome flags and enable them:
    • chrome://flags/#optimization-guide-on-device-model - Set to "Enabled BypassPerfRequirement"
    • chrome://flags/#writer-api-for-gemini-nano - Set to "Enabled" (for Auto-Fill feature)
    • chrome://flags/#rewriter-api-for-gemini-nano - Set to "Enabled" (for Text Rewriting)
    • chrome://flags/#proofreader-api-for-gemini-nano - Set to "Enabled" (for Text Proofreading)
  • Restart Chrome after enabling all flags
  • Wait for Gemini Nano download: After restart, Chrome will download the AI model (may take a few minutes)

Installation Steps

  1. Install dependencies:

    npm install

  2. Build the extension:

    npm run build

  3. Load in Chrome:

    • Open Chrome and navigate to chrome://extensions/
    • Enable "Developer mode" (toggle in top right)
    • Click "Load unpacked"
    • Select the dist folder from this project

  4. Create Your Profile:

    • Click the PrIDA extension icon
    • Go to the "Profile" tab
    • Create a new profile with your name
    • Add context about yourself (experience, skills, education, preferences, etc.)
    • The more context you provide, the better the AI suggestions will be

  5. Test the Features:

    Auto-Fill:

    • Visit any website with input fields
    • You should see small blue-purple AI icons appear next to each input field
    • Click an icon to get an AI-generated suggestion
    • Review and accept/reject the suggestion

    Text Rewriting:

    • Type or paste any text into an input field
    • Select the text you want to rewrite
    • Right-click and choose "Rewrite with PridaAI"
    • The text will be automatically improved

    Text Proofreading:

    • Type or paste any text (can include errors)
    • Select the text you want to proofread
    • Right-click and choose "Proofread with PridaAI"
    • Grammar and spelling errors will be automatically corrected

🏗️ Architecture

System Overview

PrIDA uses a sophisticated multi-layer architecture with three main AI-powered features:

1. Content Script Auto-Fill System

DOM Scanning (contentScript.tsx):

  • Scans all pages for fillable input fields (inputs, textareas, contenteditable)
  • Uses MutationObserver to detect dynamically added inputs
  • Injects React components via createRoot() for each field
  • Special support for LinkedIn, Gmail, and other rich text editors

Page Context Extraction (pageContextExtractor.ts):

  • Traverses DOM tree around the target input (up to 5 levels)
  • Scores text blocks by relevance (keywords, length, question marks)
  • Returns the most relevant context (max 1000 chars)
  • Excludes navigation, headers, footers for better accuracy

AI Retrieval System (aiRetrieval.ts):

  • Retrieves relevant chunks from your profile using keyword similarity
  • Domain-agnostic algorithm works for any use case (job, medical, legal, etc.)
  • Uses Chrome's on-device LanguageModel API (Gemini Nano)
  • Combines profile data + page context for accurate suggestions

User Interface (FormFillIcon.tsx):

  • Gradient circular button with sparkle icon
  • Pulse animation while AI is thinking
  • Modal preview with Accept/Reject options
  • Dispatches proper input/change events for form validation

2. Text Rewriting System

Rewriter API Integration (handleRewriteText()):

  • Uses Chrome's Gemini Nano Rewriter API for on-device text improvement
  • Streaming API support for real-time processing
  • Configurable options: tone, length, and format preservation
  • Automatic text replacement in any editable element

Processing Flow:

User selects text → Right-click menu → Rewriter API creates session →
Streaming rewrite → Collect chunks → Replace selected text → Dispatch events

Key Features:

  • No network requests - 100% on-device
  • Works with input, textarea, and contenteditable elements
  • Preserves cursor position and form state
  • Error handling with user-friendly notifications

3. Text Proofreading System

Proofreader API Integration (handleProofreadText()):

  • Uses Chrome's Gemini Nano Proofreader API for grammar/spelling correction
  • Returns corrected text with all fixes applied
  • Simplified configuration for quick corrections

Processing Flow:

User selects text → Right-click menu → Proofreader API creates session →
Analyze text → Get correctedInput → Replace selected text → Dispatch events

Correction Types:

  • Grammar errors
  • Spelling mistakes
  • Punctuation issues
  • Sentence structure improvements

4. Context Menu System

Background Service Worker (background.js):

  • Registers three context menu items on installation
  • Handles user interactions and message passing
  • Manages notifications for success/error states
  • Communicates with content script via Chrome messaging API

Context Menu Items:

  1. "Ask PridaAI" - Available on all editable fields
  2. "Rewrite with PridaAI" - Available on text selections
  3. "Proofread with PridaAI" - Available on text selections

Data Flow Diagrams

Auto-Fill Flow:

User clicks icon → Extract label & page context → Get active profile →
Build AI prompt → Generate answer → Show preview → User accepts →
Fill input & dispatch events

Rewrite Flow:

User selects text → Right-click "Rewrite" → Check API availability →
Create Rewriter session → Stream rewritten text → Replace text →
Notify user of success

Proofread Flow:

User selects text → Right-click "Proofread" → Check API availability →
Create Proofreader session → Get corrected text → Replace text →
Notify user of success

Component Architecture

┌─────────────────────────────────────────┐
│         Chrome Extension                │
├─────────────────────────────────────────┤
│  Background Service Worker              │
│  - Context Menu Manager                 │
│  - Message Router                       │
│  - Notification System                  │
└─────────────────┬───────────────────────┘
                  │
    ┌─────────────┴─────────────┐
    │                           │
┌───▼──────────────┐  ┌────────▼────────────┐
│  Content Script  │  │   Extension UI      │
│  - Auto-Fill     │  │   - Profile Manager │
│  - Rewriter      │  │   - Chat Interface  │
│  - Proofreader   │  │   - Settings        │
└───┬──────────────┘  └─────────────────────┘
    │
┌───▼──────────────────────────────┐
│   Chrome Gemini Nano APIs        │
│   - LanguageModel (Auto-Fill)    │
│   - Rewriter (Text Rewriting)    │
│   - Proofreader (Grammar Check)  │
└──────────────────────────────────┘

💻 Development

For development with hot reload:

npm run dev

Then load the extension from the dist folder in Chrome.

Building Content Script

The content script is built separately from the main app bundle. The Vite config creates two entry points:

  • dist/assets/index.js - Main extension UI
  • dist/contentScript.js - Content script for webpage injection

📦 Build for Production

npm run build

The production-ready extension will be in the dist folder.

Build Output

The build process creates two separate bundles:

  1. Main Extension UI (dist/assets/index.js):

    • React application with all UI components
    • Profile management, chat interface, settings
    • Bundled with Tailwind CSS

  2. Content Script (dist/contentScript.js):

    • Injected into all web pages
    • Auto-fill icon injection and handling
    • Rewriter and Proofreader functionality
    • Context menu event handlers

Build Performance

  • Main bundle: ~190KB (gzipped: ~57KB)
  • Content script: ~166KB (gzipped: ~54KB)
  • Total extension size: ~356KB
  • First load: < 1s on modern hardware

🧠 Chrome AI APIs

PrIDA leverages three powerful on-device AI APIs from Chrome's Gemini Nano:

1. Writer API (LanguageModel)

  • Purpose: Generate contextual content for auto-fill
  • Usage: await ai.languageModel.create() → prompt()
  • Flag: chrome://flags/#writer-api-for-gemini-nano
  • Privacy: 100% on-device, no network requests

2. Rewriter API

  • Purpose: Improve and rewrite existing text
  • Usage: await Rewriter.create() → rewriteStreaming()
  • Flag: chrome://flags/#rewriter-api-for-gemini-nano
  • Options:
    • tone: "as-is", "more-formal", "more-casual"
    • length: "as-is", "shorter", "longer"
    • format: "as-is", "plain-text", "markdown"

3. Proofreader API

  • Purpose: Correct grammar, spelling, and punctuation
  • Usage: await Proofreader.create() → proofread()
  • Flag: chrome://flags/#proofreader-api-for-gemini-nano
  • Returns: { correctedInput, corrections }

API Availability

Before using any API, PrIDA checks availability:

// Check if API is available
if (!("Rewriter" in self)) {
  // Show error and guide user to enable flag
}

// Create session with configuration
const rewriter = await Rewriter.create({
  sharedContext: "",
  tone: "as-is",
  length: "as-is",
  format: "as-is",
});

// Use the API
const result = await rewriter.rewriteStreaming(text);

Requirements

  • Chrome 127 or higher
  • Gemini Nano model downloaded (~1-2GB, automatic after enabling flags)
  • Sufficient RAM (minimum 4GB recommended)
  • All processing happens on-device - no internet required after initial setup

🎨 Customization

Tailwind Colors

The extension uses a custom color palette with neutral and blue tones. You can modify these in tailwind.config.js:

  • Neutral: Gray scale from 50 to 950
  • Blue: Primary brand colors from 50 to 950

Components

All UI components are in the src/components/ folder:

  • Header: Top navigation with branding
  • MainContent: Main content area with tabs (Data Profiles, Actions, Settings, About)
  • Footer: Bottom footer with links
  • Card: Reusable card component with variants
  • DataProfileTabNew: Profile creation and management interface
  • ChatTab: Natural language interface for querying profiles
  • SettingsTab: Extension configuration and domain whitelist

Content Script Customization

The auto-fill icon appearance can be customized in FormFillIcon.tsx:

  • Icon size and position
  • Gradient colors
  • Animation effects
  • Modal styling

📝 License

MIT

👤 Author

Inzimam Ul Haq

About

Fill Any Form with Single Click

prida-ai.netlify.app/

Resources

Readme

License

MIT license
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages