WebPage Chatter

Chat with any webpage using Gemini AI

About WebPage Chatter

WebPage Chatter is a powerful browser extension that enables users to ask questions about the content of any webpage they're viewing. The extension extracts the textual content, metadata, and other relevant information from the page and uses the Gemini AI API to provide intelligent responses to user queries.

Key Features

💬

Chat with Any Webpage

Ask questions about the content of any webpage you're viewing and get intelligent responses.

📄

Comprehensive Content Extraction

Extracts text, metadata, URL, title, and image alt text from webpages for context-aware responses.

🤖

Gemini AI Integration

Powered by Google's Gemini AI models for intelligent, context-aware responses.

🔊

Text-to-Speech

Listen to AI responses with customizable voice and speed settings.

💾

Save Important Answers

Save useful chat interactions for future reference.

🔄

Multiple Activation Methods

Open the sidebar via toolbar icon, context menu, or keyboard shortcut.

Installation Instructions

1. Clone the repository: git clone https://github.com/chirag127/WebPage-Chatter.git
2. Navigate to the extension directory: cd WebPage-Chatter/extension
3. Install dependencies and generate icons: npm install --save-dev sharp && node ../scripts/generate-pngs.js
4. Load the extension in your browser:
  • Chrome: Go to chrome://extensions/ → Enable "Developer mode" → Click "Load unpacked" → Select the extension folder
  • Firefox: Go to about:debugging#/runtime/this-firefox → Click "Load Temporary Add-on" → Select any file in the extension folder
  • Edge: Go to edge://extensions/ → Enable "Developer mode" → Click "Load unpacked" → Select the extension folder
5. Configure the extension by clicking on the extension icon and going to Settings to enter your Gemini API key

How to Use

  • Navigate to any webpage you want to chat about.
  • Open the WebPage Chatter sidebar using one of these methods:
    • Click the extension icon in the toolbar
    • Right-click on the page and select "Chat with this page"
    • Use the keyboard shortcut (Ctrl+Shift+C or Command+Shift+C on Mac)
  • Type your question in the input field and press Enter or click the send button.
  • View the AI's response in the chat.
  • Optionally use the TTS controls to have the response read aloud or save important answers for future reference.

Technology Stack

HTML5
CSS3
JavaScript
Chrome Extension API
Firefox Add-on API
Google Gemini AI
FastAPI (Backend)
Web Speech API