Insight.AI

logo

🌟 Project Journey & Insights

This section details the story behind Insight.AI, from the initial idea to the challenges faced during development.

The Inspiration

The idea for Insight.AI was born from a simple, everyday frustration: context switching. While reading articles, technical documentation, or research papers, I constantly found myself highlighting unfamiliar terms, opening a new tab, and searching for a definition. This cycle, though small, breaks concentration and disrupts the flow of learning.

I envisioned a tool that could act as an intelligent companion, living right inside the browser. It would understand the context of my reading and provide instant answers without ever forcing me to leave the page. The goal was to make the web a more seamless and enriching environment for curiosity and research.

How It Was Built

I chose to build this as a Chrome Extension using Manifest V3, the modern standard that emphasizes security and performance. The architecture is intentionally lightweight, relying on vanilla JavaScript, HTML, and CSS to keep the extension fast and responsive.

The project is broken down into a few key components:

background.js (The Brain): This service worker is the central hub. It listens for user actions (like right-clicking text), creates the context menus, and, most importantly, handles all communication with the Google Gemini API.
Content Scripts (The Hands): These scripts are the bridge to the webpage content.
- tooltip_content_script.js injects the subtle floating tooltip that appears on text selection.
- history_content_script.js dynamically creates and manages the history sidebar.
- The showAIResponse function (injected from background.js) is responsible for rendering the draggable AI response pop-up directly onto the page.
popup.html (The Control Panel): This is the UI for the extension's settings, allowing users to configure the theme and AI response behavior.

The "magic" comes from the Google Gemini API. I chose the gemini-2.0-flash-001 model because it strikes an excellent balance between speed, intelligence, and cost-effectiveness. By crafting specific prompts for explaining, summarizing, and translating, I could leverage a single powerful model for all of the extension's core features.

What I Learned

This project was a fantastic learning experience. Here are some of the key takeaways:

Chrome Extension Architecture (MV3): I gained a deep understanding of the event-driven nature of extensions, the strict separation between the service worker, content scripts, and popups, and the importance of asynchronous message passing to communicate between them.
Asynchronous JavaScript: Handling multiple chrome.storage calls, fetch requests, and user events required a solid grasp of async/await. Refactoring nested callbacks into clean, readable async functions was a major step in improving the codebase.
Defensive DOM Manipulation: Injecting UI into unknown websites is tricky. I learned to write CSS that is highly specific to avoid inheriting styles from the host page and to build UI components (like the draggable pop-up) that are resilient and self-contained.

Challenges I Faced

API Key Management: The most significant challenge from a security perspective. The current method requires users to manually insert their API key into the source code, which is only suitable for local development. For a publicly distributed extension, the next step would be to create a secure options page where the user can input and save their key in chrome.storage.sync, ensuring it's never exposed in the code.
Maintaining State Across Components: Synchronizing the UI theme (dark/light) between the settings popup, the AI response box, and the history sidebar was a puzzle. The solution was to use chrome.storage.sync as a single source of truth and have each component read from it upon creation.
Asynchronous Race Conditions: In early versions, there were moments where a user could fire off a new API request before the previous one had finished rendering its UI. This led to unpredictable behavior. I addressed this by ensuring that any existing pop-up is removed (document.getElementById("ai-popup-box").remove()) before a new one is created, making the user experience clean and predictable.