Gemini Navigator

Gemini Navigator allows you to interact with the Gemini AI directly from a Firefox sidebar using Gemini API. You can maintain conversation history and view formatted AI responses.

Comment

Gemini Navigator – Project Overview

Inspiration

The idea behind Gemini Navigator was to provide an easy way to interact with Gemini AI directly from the Firefox sidebar. We wanted users to seamlessly select text from any webpage and use it as context for AI-powered conversations.

What it does

  • Adds a Firefox sidebar for interacting with Gemini AI.
  • Allows selecting text from webpages and sending it as context.
  • Maintains persistent conversation history.
  • Provides formatted AI responses using basic markdown-like syntax.
  • Includes configurable settings such as API key, AI model, and max token limits.

How we built it

  • Languages & Tools: JavaScript, HTML, CSS, Firefox WebExtension APIs
  • Main Components:
    • sidebar.html / sidebar.js – Main UI and chat logic
    • background.js – Handles API requests, context menu, and storage
    • manifest.json – Defines extension structure
    • icons/ – Extension favicon and sidebar icons
  • Techniques:
    • Message passing between sidebar and background script
    • Context-aware prompt building
    • Using Local Storage to persist conversation history.

Challenges we ran into

  • Handling asynchronous API calls while keeping the UI responsive.
  • Maintaining proper conversation context across multiple messages.
  • Formatting AI responses cleanly in the sidebar.
  • Ensuring cross-browser compatibility with the Firefox WebExtension APIs.

Accomplishments that we're proud of

  • Fully functional sidebar extension integrating with Gemini AI.
  • Persistent conversation history that survives sidebar reloads.
  • Clear, minimal UI for seamless user experience.

What we learned

  • Deepened understanding of browser extension architecture.
  • Learned effective use of message passing between sidebar and background scripts.
  • Gained experience working with external AI APIs and managing API keys securely.
  • Improved skills in DOM manipulation and responsive UI design.

What's next for Testing

  • Implement proper error handling for API failures and invalid API keys.
  • Test conversation continuity when switching tabs or reloading the sidebar.
  • Improve performance for larger conversation histories.
  • Add optional features like multiple model selection or dark mode.

Built With

Share this project:

Updates