KeyTube 🎬

AI Powered YouTube Content Creator using Chrome's Built-in AI

KeyTube is a Chrome extension that leverages Chrome's built-in AI models (Gemini Nano) to help content creators generate YouTube ready titles, scripts, descriptions, and tags from any web content. Built for the Google Chrome Built-in AI Challenge, it showcases the power of local AI processing with privacy-first design.

✨ Features

🤖 Chrome Built-in AI Integration

• Prompt API: Powered by Chrome's Gemini Nano for local content generation
• Translator API: Real time translation using Chrome's built-in translation models
• Streaming Generation: Real time text generation with visual feedback
• Privacy First: All AI processing happens locally on your device

🎯 Dual Operation Modes

• Research Mode: Auto extract content from selected text or webpage
• Manual Mode: Direct input for custom content creation

📝 YouTube Content Suite

• Smart Titles: Generate 3 catchy YouTube titles (optimized for <65 characters)
• Engaging Scripts: Full video scripts with hooks, main points, and CTAs
• SEO Descriptions: YouTube optimized descriptions with social media placeholders
• Keyword Tags: AI extracted relevant tags for better discoverability

🎤 Real Time Audio Transcription

• Live Speech-to-Text: Record and transcribe audio in real time using Web Speech API
• Simple Permission Handling: Clear confirmation dialogs before requesting microphone access
• Multiple Sessions: Record multiple audio clips in sequence (2 minute limit each)
• Smart Deletion: Remove only the latest transcription with precision

🌍 Multi Language Support

• 5 Languages: Hindi, Spanish, French, Japanese, Portuguese
• Smart Translation: Maintains tone and effectiveness across languages
• Fallback Handling: Intelligent PDF export with translation notices

📄 Professional Export Options

• PDF Generation: Professional PDFs with jsPDF integration
• TXT Export: Formatted text files preserving emojis and markdown
• Individual Copy: Section-by-section copying with visual feedback
• Regeneration: Refresh any section for new variations

🎨 Modern User Experience

• Responsive Design: Sidepanel interface that adapts to all screen sizes
• Theme Support: Dark/light themes with system preference detection
• Smooth Animations: Professional UI with real time feedback
• Accessibility: Keyboard navigation and screen reader support

🔧 Advanced Features

• 5000 Character Limit: YouTube policy compliance for descriptions
• Clean Formatting: Removes problematic markdown and special characters
• Scroll Navigation: Smart navigation highlighting based on scroll position
• Translation Loading: Visual feedback during translation processes

🚀 Quick Start

Installation

1. Download the extension

   git clone https://github.com/sauruvibes/KeyTube.git
   cd KeyTube

2. Load in Chrome

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode" (toggle in top right)
   • Click "Load unpacked" and select the KeyTube folder

3. Start creating!

   • Pin the extension to your toolbar
   • Highlight text on any webpage
   • Click the extension icon

Usage

Research Mode (Default)

1. Highlight text on any webpage
2. Click the KeyTube icon (opens sidepanel directly)
3. Review the auto filled content
4. Click "Generate Content" to create your YouTube content
5. Copy, regenerate, or download as PDF

Manual Mode

1. Click the KeyTube icon
2. Switch to "Manual Mode"
3. Type your video idea or use speech-to-text (microphone button)
   • For microphone: Click extension icon → "View web permissions" → Enable "Microphone"
4. Generate your YouTube content

Custom Text Integration

1. Edit any generated content in the textareas
2. Click Regenerate button
3. Custom content gets intelligently merged with AI generated content

📁 Project Structure

KeyTube/
├── manifest.json          # Chrome extension manifest (MV3)
├── background.js          # Service worker & context menu
├── content-script.js      # Page content extraction
├── popup.html            # Popup interface
├── popup.js              # Popup logic & AI integration
├── popup.css             # Popup styling
├── sidepanel.html        # Side panel interface
├── sidepanel.js          # Side panel logic
├── sidepanel.css         # Side panel styling
├── icons/                # Extension icons (16px, 48px, 128px)
├── vendor/               # Third party libraries (jsPDF)
└── docs/                 # Documentation

🛠️ Development

Prerequisites

• Chrome browser (latest version)
• Chrome Built-in AI features enabled
• Basic knowledge of Chrome extensions

Setup

1. Clone the repository
2. Open Chrome Extensions page (chrome://extensions/)
3. Enable Developer mode
4. Load the extension as unpacked

Key Components

• Background Script: Handles context menu, AI calls, and messaging
• Content Script: Extracts text from web pages
• Popup/Sidepanel: Main user interface
• AI Integration: Chrome's built-in AI API integration

Chrome Built-in AI Integration

KeyTube leverages Chrome's built-in AI APIs for local, privacy first content generation:

Prompt API Implementation

// Initialize Chrome's Language Model (Gemini Nano)
async function ensureLanguageModelSession() {
  if (!('LanguageModel' in self)) {
    throw new Error('Built-in AI not available in this Chrome version.');
  }
  
  const availability = await LanguageModel.availability(lmOptions);
  if (availability === 'unavailable') {
    throw new Error('Model unavailable on this device.');
  }
  
  return await LanguageModel.create({
    expectedInputs: [{ type: 'text', languages: ['en'] }],
    expectedOutputs: [{ type: 'text', languages: ['en'] }],
    signal: controller.signal
  });
}

Translator API Implementation

// Chrome's built-in translation
async function translateText(text, targetLanguage) {
  if (!('Translator' in self)) {
    throw new Error('Translator API not available.');
  }
  
  const translator = await Translator.create({
    sourceLanguage: 'en',
    targetLanguage: targetLanguage
  });
  
  return await translator.translate(text);
}

APIs Used

1. Prompt API: Core content generation using Gemini Nano
2. Translator API: Real-time multi-language translation

Supporting Technologies

1. Web Speech API : For real time speech to text transcription
2. SidePanel API : For modern UI

🎨 Customization

Themes

• Toggle between light and dark themes
• Theme preference is saved across sessions
• Uses modern CSS custom properties

Content Generation

• Customize prompt templates in the code
• Adjust content length and style
• Add new languages for translation

🔒 Privacy & Security

• Local Processing: Content is processed locally when possible
• No Data Storage: Generated content is not stored on external servers
• User Control: Clear privacy controls and data handling
• Minimal Permissions: Only requests necessary Chrome extension permissions

📋 Permissions & Privacy

Required Permissions

• activeTab: Access current tab content for text extraction
• storage: Save user preferences and theme settings
• scripting: Inject content script for seamless text selection
• sidePanel: Modern sidepanel interface for better UX
• <all_urls>: Content extraction from any website

Privacy Commitment

• Local Processing: All AI operations use Chrome's built-in models
• No External APIs: No data sent to third party servers
• No Data Storage: Generated content is not stored externally
• User Control: Complete control over data and generation process

Chrome Built-in AI Requirements

• Chrome version 127+ with AI features enabled
• Gemini Nano model availability on device
• Built-in AI experimental features enabled

🐛 Troubleshooting

Common Issues

Extension not loading

• Ensure Developer mode is enabled
• Check for JavaScript errors in the console
• Verify all files are present

Content not generating

• Check if Chrome Built-in AI is available
• Verify Chrome version (127+)
• Try refreshing the page

Text not being extracted

• highlight a text on website then click on research button or home button, try with different websites
• Ensure the page allows content scripts
• Try manual mode as an alternative
• Check browser console for errors

Microphone not working

• Click the KeyTube extension icon in your toolbar
• Select "View web permissions"
• Toggle "Microphone" to "Allow"
• Refresh the page and try again

Translation not working

• Verify Chrome's Translator API is available
• Check internet connection for model downloads
• Try fallback AI translation

🤝 Contributing [Currently Not Accepting]

We welcome contributions! Please see our Contributing Guidelines for details.

How to Contribute

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Chrome Extensions team for MV3 support
• Chrome Built-in AI team for the amazing APIs
• YouTube creators for feedback and feature requests

🎥 Demo Video

Watch KeyTube in Action

📊 Hackathon Submission Details

APIs Demonstrated

1. Prompt API: Core content generation using Gemini Nano
2. Translator API: Real-time multi-language translation

Supporting Technologies

1. Web Speech API : For real time speech to text transcription
2. SidePanel API : For modern UI

Technical Highlights

• Local AI Processing: 100% privacy first with Chrome's built-in models
• Streaming Generation: Real time text generation with visual feedback
• Professional Export: PDF generation with jsPDF
• Responsive Design: Works across all Chrome extension contexts
• Error Handling: Graceful fallbacks and user friendly error messages
• Custom Text Integration: Smart approval system for user content
• YouTube Compliance: 5000 character limits and clean formatting

📞 Support & Feedback

• 🐛 Bug Reports: GitHub Issues
• 🏆 Hackathon Feedback: Built for Google Chrome Built-in AI Challenge 2025

---

🏆 Built for Google Chrome Built-in AI Challenge 2025

Made with ❤️ for content creators using Chrome's Built-in AI

⭐ Star this repo • 🎥 Demo Video