Timely

A comprehensive Chrome extension that integrates with Chrome's built-in AI APIs to provide a complete suite of text processing capabilities powered by Gemini Nano.

Features

📝 Text Summarizer

• Smart Summarization: Leverages Chrome's Summarizer API with Gemini Nano
• Flexible Output: Choose between key points, tl;dr, teaser, or headline formats
• Adjustable Length: Short, medium, or long summaries
• Multi-interface Access: Popup, window, and floating overlay views

✏️ Text Proofreader

• Grammar & Spelling Check: Detects and corrects errors using Chrome's Proofreader API
• Visual Error Highlighting: Red underlines show errors with hover explanations
• Detailed Corrections: View original → corrected text with suggestions
• Multi-language Support: Configure expected input languages
• Real-time Feedback: Instant proofreading with progress monitoring

💬 AI Prompt Assistant

• Natural Language Processing: Powered by Chrome's Prompt API with Gemini Nano
• Customizable Parameters: Adjust temperature and topK for response creativity
• System Prompts: Configure AI behavior with custom system instructions
• Streaming Responses: Real-time response generation with progressive text display
• Context Management: Maintain conversation context across interactions

🌐 Language Detector

• Automatic Detection: Identify languages in text using Chrome's Language Detection API
• Confidence Scoring: Get reliability scores for detected languages
• Multi-language Support: Detect multiple languages within single text blocks
• Real-time Analysis: Instant language identification as you type

🔄 Text Translator

• AI-Powered Translation: Leverage Chrome's Translation API for accurate translations
• Language Pair Support: Translate between supported language combinations
• Quality Assessment: Get confidence scores for translation accuracy
• Preserve Formatting: Maintain text structure during translation

✨ Text Rewriter

• Content Transformation: Rewrite text while preserving meaning using Chrome's Rewriter API
• Tone Adjustment: Modify writing style and tone to match your needs
• Length Control: Expand or condense content as required
• Context Preservation: Maintain original intent while improving clarity

✍️ AI Writer

• Content Generation: Create original text using Chrome's Writer API
• Writing Assistance: Get help with various writing tasks and formats
• Creative Support: Generate ideas, outlines, and full content pieces
• Adaptive Style: Adjust writing style based on context and requirements

🎯 Text Selection Integration

• Floating Overlay: AI-powered overlay appears on text selection
• Context-aware Processing: Automatically process selected text from any website
• Seamless Workflow: No need to copy-paste text between applications
• Multi-tool Access: All AI features available directly from selected text

Setup Requirements

Chrome Configuration

1. Enable Chrome Flags:

   • Navigate to chrome://flags/
   • Enable #summarization-api-for-gemini-nano
   • Enable #proofreader-api-for-gemini-nano
   • Enable #prompt-api-for-gemini-nano
   • Enable #language-detection-api
   • Enable #translation-api
   • Enable #rewriter-api-for-gemini-nano
   • Enable #writer-api-for-gemini-nano
   • Restart Chrome

2. System Requirements:

   • Chrome 127+ (minimum for AI APIs)
   • Chrome 128+ (Summarizer API)
   • Chrome 141+ (Proofreader API)
   • 22GB+ available storage space for Gemini Nano model
   • 4GB+ GPU memory
   • Unmetered internet connection for model download

Development Setup

# Install dependencies
pnpm install

# Development mode
pnpm dev

# Build for production
pnpm build

Technology Stack

• Framework: Plasmo Framework v0.90.5
• UI: React 18 with TypeScript
• Styling: Tailwind CSS v3.4.16 + DaisyUI v4.12.24
• AI APIs: Chrome's Built-in AI APIs (Summarizer, Proofreader, Prompt, Language Detection, Translation, Rewriter, Writer)
• Build: PostCSS with autoprefixer

Usage

Installation

1. Build the extension: pnpm build
2. Open Chrome Extensions page: chrome://extensions/
3. Enable "Developer mode"
4. Click "Load unpacked" and select the build folder

Using the Extension

1. Popup Interface: Click the extension icon for quick access to all 7 AI features
2. Window Interface: Click "Open in Window" for expanded view with better layout
3. Navigation: Use the dropdown menu to switch between all AI APIs:
   • 📝 Summarizer API
   • ✏️ Proofreader API
   • 💬 Prompt API
   • 🌐 Language Detector API
   • 🔄 Translator API
   • ✨ Rewriter API
   • ✍️ Writer API
4. Text Selection: Select text on any webpage to trigger the floating overlay with AI tools
5. First Use: APIs will download Gemini Nano model automatically (may take several minutes)

Architecture

Components

• SummarizerUI.tsx - Text summarization interface and logic
• ProofreaderUI.tsx - Text proofreading interface and logic
• PromptUI.tsx - AI prompt assistant interface and logic
• LanguageDetectorUI.tsx - Language detection interface and logic
• TranslatorUI.tsx - Text translation interface and logic
• RewriterUI.tsx - Text rewriting interface and logic
• WriterUI.tsx - AI writing assistant interface and logic
• popup.tsx - Main popup with dropdown navigation for all 7 AI features
• tabs/window.tsx - Expanded window view with URL parameter routing
• contents/floating-overlay.tsx - Content script for text selection overlay
• contents/text-selection.ts - Text selection handler for webpage integration

Key Features

• Responsive Design: Optimized for both popup (384px) and window (1100px) views
• Progressive Download: Automatic model download with progress tracking
• Error Handling: Comprehensive error states and user feedback
• Multi-API Navigation: Seamless switching between all 7 AI features via dropdown
• Text Selection Integration: Floating overlay appears on text selection across websites
• Cross-context Support: Works in popup, window, and content script environments

API Integration

Summarizer API

const summarizer = await window.Summarizer.create({
  type: 'key-points',
  format: 'markdown',
  length: 'medium'
});
const summary = await summarizer.summarize(text);

Proofreader API

const proofreader = await window.Proofreader.create({
  expectedInputLanguages: ['en']
});
const result = await proofreader.proofread(text);

Development History

Phase 1: Initial Setup

• Plasmo Framework integration
• Basic summarization functionality
• Chrome Summarizer API integration

Phase 2: UI Enhancement

• Tailwind CSS v3 integration (v4 incompatible with Plasmo)
• Responsive design implementation
• Popup/window view optimization

Phase 3: Proofreader Integration

• Chrome Proofreader API implementation
• Error highlighting and correction display
• Unified tab navigation system
• URL parameter routing for window views

Known Issues & Solutions

1. Model Download: First use requires downloading Gemini Nano (~22GB)

   • Solution: Ensure adequate storage and stable connection

2. API Availability: Features depend on Chrome flags and hardware

   • Solution: Check chrome://flags/ and system requirements

3. Window Routing: Proofreader window opens correctly via URL parameters

   • Solution: Uses single window.tsx with tab parameter routing

Acknowledgments

• Chrome AI team for the built-in AI APIs
• Plasmo Framework for Chrome extension development
• Tailwind CSS for utility-first styling