Welcome to the comprehensive documentation for NovelSynth - the AI-powered browser extension that enhances your reading experience across the web.

1. Getting Started
   • What is NovelSynth?
   • Key Features
     • AI-Powered Enhancement
     • Smart Website Detection
     • Persistent Storage
     • Customizable Settings
2. Installation Guide
3. User Manual
4. Developer Documentation
5. AI Providers & Configuration
6. Supported Websites
7. API Reference
8. Troubleshooting
   • Common Issues
   • Debug Mode
   • Performance Issues
   • Getting Help
9. Contributing
10. Changelog

NovelSynth is an intelligent browser extension that uses AI to enhance your reading experience on websites containing long-form content like novels, articles, and technical documentation. It can:

• Enhance Content: Improve grammar, style, and readability
• Summarize: Create concise summaries of long articles
• Analyze: Provide insights about content structure and themes
• Toggle Views: Switch between original and enhanced content
• Cross-Platform: Works on Chrome, Firefox, and Edge

• Multiple AI providers (Google Gemini, OpenAI, Anthropic)
• Context-aware content processing
• Maintains original meaning while improving readability

• Automatic detection of content-rich websites
• Specialized handlers for popular platforms
• Custom content extraction algorithms

• Content saved across sessions
• Quick toggle between original/enhanced versions
• Offline access to processed content

• Choose your preferred AI provider
• Adjust enhancement intensity
• Configure auto-enhancement rules

1. Download the Extension

   # Clone the repository
   git clone https://github.com/LifeExperimentalist/novelsynth.git
   cd novelsynth
   
   # Install dependencies
   npm install
   
   # Build the extension
   npm run build

2. Load in Browser

   • Open chrome://extensions/ (or edge://extensions/)
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the dist folder

3. Configure API Keys

   • Click the NovelSynth extension icon
   • Navigate to Settings
   • Add your AI provider API keys

1. Build for Firefox

   npm run build:firefox
   npm run package:firefox

2. Install Add-on

   • Open about:debugging
   • Click "This Firefox"
   • Click "Load Temporary Add-on"
   • Select the generated .xpi file

Visit the browser extension stores:

• Chrome Web Store (Coming Soon)
• Firefox Add-ons (Coming Soon)
• Edge Add-ons (Coming Soon)

NovelSynth requires API access to AI providers:

Google Gemini (Recommended)

1. Visit Google AI Studio
2. Create a new API key
3. Copy the key to NovelSynth settings

OpenAI (Optional)

1. Visit OpenAI Platform
2. Generate a new secret key
3. Add to NovelSynth settings

• Primary AI Provider: Select your preferred AI service
• Enhancement Mode: Choose between "Improve", "Grammar", "Style", etc.
• Auto-Enhancement: Enable automatic processing on supported sites
• Content Types: Select which types of content to process

1. Visit any supported website
2. Right-click on text content
3. Select "Enhance with NovelSynth"
4. Wait for processing to complete

1. Click the NovelSynth icon in your browser toolbar
2. Choose your desired action:
   • 🚀 Enhance Content: Improve the current page
   • 📝 Summarize: Create a summary
   • 🔄 Toggle View: Switch between original/enhanced
   • ⚙️ Settings: Configure preferences

• Ctrl+Shift+E (Windows/Linux) or Cmd+Shift+E (Mac): Enhance content
• Ctrl+Shift+S (Windows/Linux) or Cmd+Shift+S (Mac): Summarize
• Ctrl+Shift+T (Windows/Linux) or Cmd+Shift+T (Mac): Toggle view

• Toggle Banner: Appears after enhancement, allows switching views
• Original/Enhanced Indicator: Shows current view state
• Word Count: Displays before/after word counts

• Enhanced content is automatically saved
• Access stored content from the popup
• Clear storage to free up space
• Export enhanced content (Coming Soon)

NovelSynth follows a modular architecture designed for extensibility and maintainability:

NovelSynth/
├── src/
│   ├── background.ts          # Extension lifecycle management
│   ├── content.ts             # Page content manipulation
│   ├── popup.ts               # User interface
│   ├── services/              # AI service integrations
│   │   ├── ai/
│   │   │   ├── BaseAIService.ts
│   │   │   ├── GeminiService.ts
│   │   │   └── AIServiceManager.ts
│   ├── utils/                 # Core utilities
│   │   ├── ContentProcessor.ts
│   │   ├── StorageManager.ts
│   │   ├── ProcessingBanner.ts
│   │   └── website-handlers/  # Site-specific handlers
│   └── types/                 # TypeScript definitions
├── manifest.json              # Extension manifest
├── popup.html                 # Popup interface
└── webpack.config.js          # Build configuration

Manages extension lifecycle, handles API requests, and coordinates between components.

class BackgroundScript {
  // Handles extension installation and updates
  private handleFirstInstall(): void

  // Processes messages from content scripts and popup
  private handleMessage(message: any, sender: chrome.runtime.MessageSender): Promise<any>

  // Manages context menus
  private setupContextMenus(): void
}

Injected into web pages to detect and process content.

class ContentScript {
  // Main content enhancement pipeline
  private async handleEnhanceContent(options: any): Promise<void>

  // Toggle between original and enhanced content
  private async handleToggleContent(): Promise<void>

  // Detect if current page has processable content
  private autoDetectContent(): void
}

Abstracts AI provider interactions and manages multiple services.

class AIServiceManager {
  // Process content using selected AI provider
  async enhanceContent(content: string, options: EnhancementOptions): Promise<ProcessingResult>

  // Generate content summaries
  async summarizeContent(content: string, options: SummarizationOptions): Promise<ProcessingResult>

  // Analyze content structure and themes
  async analyzeContent(content: string): Promise<ContentAnalysis>
}

// src/services/ai/YourAIService.ts
export class YourAIService extends BaseAIService {
  provider: AIProvider = {
    name: "Your AI Service",
    id: "your-ai",
    apiEndpoint: "https://api.yourai.com",
    requiresAuth: true,
    authType: "api_key",
    features: ["enhance", "summarize"],
    models: ["model-1", "model-2"],
    defaultModel: "model-1"
  };

  async enhanceContent(content: string, options: EnhancementOptions): Promise<ProcessingResult> {
    // Implementation here
  }
}

// src/services/ai/AIServiceManager.ts
this.services.set('your-ai', new YourAIService());

// src/utils/website-handlers/YourSiteHandler.ts
export class YourSiteHandler extends BaseWebsiteHandler {
  canHandle(): boolean {
    return window.location.hostname.includes('yoursite.com');
  }

  extractContent(): string {
    // Site-specific content extraction
  }

  extractTitle(): string {
    // Site-specific title extraction
  }
}

// src/utils/ContentProcessor.ts
private detectWebsiteHandler(): void {
  const handlers = [
    new YourSiteHandler(),
    new FanfictionHandler(),
    // ... other handlers
  ];
}

npm run build:dev    # Development build with source maps
npm run watch        # Watch mode for development
npm run dev          # Development server with auto-reload

npm run build        # Production build
npm run package      # Create distribution packages
npm run test         # Run test suite

npm run test:types   # TypeScript type checking
npm run test:extension # Extension functionality tests
npm run lint         # Code quality checks

Supported Models:

• gemini-1.5-pro: Best for complex content enhancement
• gemini-1.5-flash: Faster processing, good for summaries
• gemini-pro: Standard model for general use
• gemini-pro-vision: Image and text processing (future feature)

Configuration:

{
  "provider": "gemini",
  "model": "gemini-1.5-pro",
  "temperature": 0.7,
  "maxTokens": 8192,
  "features": ["enhance", "summarize", "analyze", "suggestions"]
}

API Key Setup:

1. Visit Google AI Studio
2. Create project and enable Gemini API
3. Generate API key
4. Add to NovelSynth settings

Supported Models:

• gpt-4-turbo: Best quality for enhancement
• gpt-4: High-quality processing
• gpt-3.5-turbo: Cost-effective option

Configuration:

{
  "provider": "openai",
  "model": "gpt-4-turbo",
  "temperature": 0.3,
  "maxTokens": 4000,
  "features": ["enhance", "summarize"]
}

Planned Models:

• claude-3-opus: Premium model
• claude-3-sonnet: Balanced performance
• claude-3-haiku: Fast processing

• FanFiction.Net: Full support with chapter navigation
• Archive of Our Own: Content extraction and enhancement
• Wattpad: Story content processing
• Royal Road: LitRPG and fantasy novel support
• Webnovel: Popular light novel platform

• Medium: Blog post enhancement
• Wikipedia: Article improvement
• News Sites: General article processing
• Technical Blogs: Code-aware enhancement

• GitHub README: Markdown processing
• GitBook: Documentation enhancement
• Confluence: Wiki content improvement

To add support for a new website:

1. Create Handler Class

   export class NewSiteHandler extends BaseWebsiteHandler {
     canHandle(): boolean {
       return window.location.hostname.includes('newsite.com');
     }
   
     extractContent(): string {
       // Implement content extraction logic
       const contentElement = document.querySelector('.main-content');
       return contentElement?.textContent || '';
     }
   
     extractTitle(): string {
       return document.querySelector('h1.title')?.textContent || document.title;
     }
   }

2. Register in ContentProcessor

   private detectWebsiteHandler(): void {
     const handlers = [
       new NewSiteHandler(),
       // ... existing handlers
     ];
   }

3. Test and Submit PR

   • Test on the target website
   • Ensure content extraction works correctly
   • Submit pull request with handler

class StorageManager {
  // Store enhanced content
  static async storeContent(
    url: string,
    originalContent: string,
    enhancedContent: string,
    metadata: ContentMetadata
  ): Promise<void>

  // Retrieve stored content
  static async getStoredContent(): Promise<Record<string, ContentStorage>>

  // Clear content for specific URL
  static async clearStoredContent(url: string): Promise<void>

  // Get storage statistics
  static async getStorageStats(): Promise<StorageStats>
}

interface ContentStorage {
  originalContent: string;
  enhancedContent: string;
  metadata: ContentMetadata;
  timestamp: string;
}

interface ContentMetadata {
  timestamp: string;
  provider: string;
  model: string;
  contentType: ContentType;
  websiteId: string;
  processingTime?: number;
}

class ProcessingBanner {
  constructor(config: BannerConfig)

  // Show processing state
  showProcessing(message: string): void

  // Show success state with toggle
  showSuccess(message: string): void

  // Show error state
  showError(message: string): void

  // Update progress
  updateProgress(percentage: number): void

  // Remove banner
  destroy(): void
}

class ContentProcessor {
  // Process current page content
  async processCurrentPage(options: ProcessingOptions): Promise<ProcessingResult>

  // Check if current page can be processed
  canHandleCurrentPage(): boolean

  // Replace page content
  replacePageContent(content: string): void

  // Toggle content display state
  isShowingEnhanced(): boolean
  setShowingEnhanced(enhanced: boolean): void
}

1. Check browser developer mode is enabled
2. Verify all required files are in dist folder
3. Check console for TypeScript compilation errors
4. Ensure manifest.json permissions are correct

1. Check API Key: Verify key is correct and has proper permissions
2. Network Issues: Check internet connection and firewall settings
3. Rate Limits: Wait if you've exceeded API rate limits
4. Content Size: Large content may need to be processed in chunks

1. Website Support: Check if site has a dedicated handler
2. Content Structure: Verify page has extractable text content
3. JavaScript Loading: Ensure content is fully loaded before processing
4. Ad Blockers: Some ad blockers may interfere with content detection

Enable debug mode for detailed logging:

// In browser console
localStorage.setItem('novelsynth-debug', 'true');

1. Switch to faster AI model (e.g., gemini-1.5-flash)
2. Reduce content chunk size in settings
3. Check system resources and close unnecessary tabs
4. Clear extension storage if full

1. Regularly clear stored content
2. Disable auto-enhancement on resource-constrained devices
3. Use content chunking for very large documents

1. Check Documentation: Review this wiki thoroughly
2. GitHub Issues: Search existing issues or create new one
3. Debug Logs: Include debug logs when reporting issues
4. System Info: Provide browser version and extension version

1. Clone Repository

   git clone https://github.com/LifeExperimentalist/novelsynth.git
   cd novelsynth

2. Install Dependencies

   npm install

3. Development Build

   npm run dev

• Use strict type checking
• Document all public methods
• Follow consistent naming conventions

• Write unit tests for new features
• Test on multiple browsers
• Verify website handler compatibility

• Update this wiki for new features
• Include code examples
• Document breaking changes

• New AI provider integrations
• Website handler development
• Performance optimizations
• Bug fixes and stability improvements

• UI/UX improvements
• Additional enhancement modes
• Mobile browser support
• Internationalization

• Advanced analytics
• Content export features
• Browser sync integration
• Premium features

1. Fork Repository
2. Create Feature Branch

   git checkout -b feature/your-feature-name

3. Make Changes with tests
4. Update Documentation
5. Submit Pull Request

• ✅ Initial release with Google Gemini support
• ✅ FanFiction.Net handler implementation
• ✅ Content enhancement and summarization
• ✅ Toggle between original/enhanced content
• ✅ Cross-browser compatibility (Chrome, Firefox, Edge)
• ✅ Persistent content storage
• ✅ Context menu integration

• 🔄 OpenAI GPT-4 integration
• 🔄 Additional website handlers (AO3, Wattpad)
• 🔄 Enhanced UI with React components
• 🔄 Performance optimizations
• 🔄 Improved error handling

• 🔄 Anthropic Claude integration
• 🔄 Content export functionality
• 🔄 Advanced analytics dashboard
• 🔄 Mobile browser support
• 🔄 Premium features

• 🔄 Machine learning content classification
• 🔄 Real-time collaborative enhancement
• 🔄 Advanced customization options
• 🔄 API for third-party integrations

NovelSynth is released under the Apache License 2.0.

• Google Gemini AI for powerful content processing
• Open source community for tools and libraries
• Beta testers and early adopters
• Contributors and maintainers

Last Updated: $(date) Wiki Version: 1.0.0