Summarize+

Summarize+ is a Chrome extension that instantly summarizes highlighted text and translates it into the user’s default language

Comment

Inspiration

When ever I was tasked to write a research essay with multiple sources, I would have to search multiple articles which takes forever, and I would always wish I could I highlight the page and get a quick summary; however, there was no option for that. So I decided to create a Chrome extension that brings summarizing right to the right-click menu, saving time and even adding translation capabilities for extra convenience.

What it does

Summarizer+ summarizes highlighted text and/or pasted text. It also translates text separately or does both functions simultaneously.

How I built it

Language: Javascript UI: Html and css Runtime-node.js AI : Google Gemini Generative AI API key management: dotenv Bundler: Parcel Version control: Github

Frontend

  • Created the popup interface using ** Html, Css, and Javascript**

Backend

  • Set up a small Node.js server to handle requests to the Gemini API securely.
  • Integrated Google Generative AI (Gemini) using the @google/generative-ai npm package to summarize and translate text.
  • Stored the API key safely in a .env file and loaded it using the dotenv library.

Dependencies and build

  • Managed dependencies and project scripts using npm and package.json.
  • Used Parcel for efficient bundling and local development.
  • Built the extension using npm run build, which generated the production-ready files inside the /dist folder.
  • Loaded the /dist folder as an unpacked extension in Chrome for testing.

Challenges I ran into

  • Integrating the Google Generative AI API required careful setup of authentication keys and environment variables.
  • Managing CORS issues and ensuring secure API communication from the Chrome extension context.
  • Debugging the popup interface and content script connection.
  • Ensuring the summarization results displayed properly within Chrome’s limited popup window.
  • Ensuring gemini did not produce assumptions by given specific instructions.

Accomplishments that i'm proud of

  • Built a working Chrome extension capable of summarizing text directly from any webpage.
  • Successfully connected the extension to Google’s Gemini model for fast, high-quality summaries.
  • Designed a clean and minimal popup interface for seamless use.

What I learned

  • How to build and structure a Chrome extension with manifest v3.
  • Practical integration of Node.js, Parcel, and Google Generative AI APIs.
  • The importance of clean project organization and separating environment secrets.
  • How to create a server.

What's next for Summarize+

  • Implement dark mode and design improvements for the popup UI.
  • Publish the extension on the Chrome Web Store for public access.

Built With

Share this project:

Updates