MakeItSimple

Read less. Understand more. Your AI companion for a clearer web.

Comment

Inspiration

We’ve all been there: You open a documentation page, a research paper, or a "Terms and Conditions" document, and you're immediately hit with a wall of dense text and jargon. The internet is full of information, but it’s often locked behind complexity.

We realized that while we have access to all human knowledge, we lack a tool to make it digestible in real-time. We didn't just want a summarizer; we wanted a companion. We wanted the feeling of having a genius friend sitting next to you, ready to tap on the shoulder and ask, "Hey, what does this paragraph actually mean?"

MakeItSimple was born from the desire to turn the entire internet—and your local documents—into a simple, two-way conversation.

What it does

MakeItSimple is a smart Chrome Extension that lives in your browser's side panel (similar to Microsoft Copilot), acting as your reading assistant.

  • Universal Document Support (Web & PDF): Unlike standard extensions that only read HTML, MakeItSimple works on local files too. You can open a PDF contract or research paper stored on your hard drive, and the extension will read, summarize, and chat with it just like a normal website.
  • Instant Summarization: Turns long articles into 3 concise, digestible bullet points.
  • "Explain Like I'm 5" (Context Menu): You can highlight any complex sentence, right-click, and choose "MakeItSimple: Explain this." The AI instantly explains that specific jargon in plain English.
  • Context-Aware Chat: You can have a full conversation with the page content. Ask specific questions like "What is the pricing model mentioned here?" or "Who is the author arguing against?"
  • Smart Session History: The extension is intelligent enough to remember your chat history specifically for that tab. If you switch tabs, the chat context switches with you. If you reload, it clears—keeping your browsing clean and organized.

How we built it

We prioritized an industry-standard architecture rather than a quick hack, separating the client from the server for security and scalability.

  1. Frontend (Chrome Extension - Manifest V3):
    • We used HTML, CSS, and Vanilla JavaScript for a lightweight, fast client.
    • PDF Integration: We implemented a custom pipeline using Mozilla's PDF.js library to render and extract text from binary PDF files client-side, allowing the AI to "see" documents that don't have a standard DOM.
    • Content Scripts interact with the browser to scrape text and listen for user highlights.
  2. Backend (Node.js & Express):
    • Instead of exposing API keys in the extension (a major security risk), we built a proxy server.
    • The server handles data cleaning, prompt engineering, and communication with the AI.
  3. The Intelligence (Google Gemini):
    • We integrated Google Gemini 2.5 Flash Lite for its incredible speed and low latency. The "flash" nature of the model ensures the UI feels snappy and responsive.
  4. UX Polish:
    • We used marked.js to render beautiful Markdown in the chat bubbles.
    • We implemented custom Chrome Storage logic to handle the complex state management of "per-tab" chat history.

Challenges we ran into

  • The "Local File" Hurdle: Chrome sandboxes extensions from reading local files (file://) by default. We had to implement specific error-handling logic to detect these URLs and guide the user to enable the specific permission in Chrome settings to unlock the PDF feature.
  • Manifest V3 Restrictions: Moving from the old background pages to Service Workers was tricky. Handling asynchronous message passing between the Content Script ↔ Background ↔ Side Panel was a logic puzzle.
  • Model Hallucinations & Availability: We initially faced issues where the model would try to hallucinate context if the webpage text was too short. We had to implement strict prompt engineering to force the model to stick only to the provided context.
  • The "Context" Problem: Users switch tabs constantly. We had to architect a robust state management system using tabId as a unique key in local storage to keep conversations distinct.

Accomplishments that we're proud of

  • True Hybrid Support: Successfully getting the extension to handle both live websites and local PDF files seamlessly.
  • Security First: We successfully kept our API keys off the client-side, which is a common pitfall in hackathon projects.
  • The "WhatsApp" Feel: We spent extra time on CSS to make the chat bubbles, auto-scrolling, and animations feel native and smooth, rather than clunky.
  • Seamless Context Menu: Getting the Right-Click -> Open Panel -> Explain flow to work instantly without the user having to manually open the extension felt like a magic moment.

What we learned

  • Prompt Engineering is UI: We learned that the quality of the "EL15" explanation depends entirely on how you frame the system prompt. "Make it simple" is vague; "Explain it to a general audience in under 50 words" yields results.
  • State Management in Extensions: We gained a deep understanding of the Chrome Runtime lifecycle and how to manage persistent data across browser reloads and tab switches.

What's next for MakeItSimple

  • Local LLM Support: Adding an option to run local models (like Llama 3) for privacy-focused users.
  • Export Notes: A feature to one-click export your summaries and chat insights to Notion or Obsidian.
  • Voice Mode: Adding text-to-speech so you can listen to your article summaries while multitasking.
Share this project:

Updates