Inspiration

Shopping online can be overwhelming, especially when browsing international e-commerce sites. Product descriptions and reviews are often in multiple languages, and search queries may not always yield the best results. I wanted to create a client-side AI shopping assistant that helps users translate, summarize, and optimize their browsing experience — all while keeping their data private.

What it does

Shopping Assistant (AI) provides three main features: Translate: Converts product descriptions and reviews into your preferred language. Summarize Reviews: Distills long, detailed reviews into concise insights, highlighting pros and cons. Optimize Search Queries: Suggests alternative phrasing to improve search results. All features currently use mocked AI functions for submission, but they are ready to be swapped with real Chrome AI APIs (Translator, Summarizer, Rewriter) once models finish downloading.

How we built it

  • Chrome Extension with modern blue-themed popup UI.
  • Popup UI with buttons for Translate, Summarize, and Optimize Search, and a styled output box.
  • AI integration (ai.js) using mock functions to simulate Chrome Built-in AI APIs.
  • Popup logic (popup.js) connects buttons to AI functions and displays results dynamically.
  • Styling (style.css) designed for a clean, modern interface.
  • Manifest (manifest.json) set up for Chrome 138+ with the required permissions.

Challenges we ran into

This was my first time building an extension and using chrome functions, i had to learn the basics first and i took a longer time to grasp concepts.

Accomplishments that we're proud of

Built a fully functional AI-powered shopping assistant that works entirely on the client side. Designed a modern, user-friendly interface ready for real Chrome AI integration. Demonstrated a working mocked AI version that simulates translation, summarization, and query rewriting.

What we learned

  • How to leverage Chrome Built-in AI APIs (Translator, Summarizer, Rewriter) for client-side AI features.
  • The importance of user activation in triggering AI model downloads.
  • Techniques for rapid prototyping and handling incomplete APIs during hackathons.
  • Best practices for Chrome extension development and modern UI design.

What's next for Shopping Assistant (AI)

Add streaming summarization to update reviews in real-time. Expand to dynamic content scripts that extract product data directly from e-commerce pages.

Built With

  • chrome-developer-tools
  • css-platform:-chrome-extension-(manifest-v3)-frameworks-/-libraries:-none-(vanilla-js-+-modular-es6)-apis:-chrome-built-in-ai-apis-?-translator
  • github-for-version-control-design-/-ui:-custom-css-with-modern-blue-themed-interface
  • html
  • languages:-javascript-(es6+)
  • rewriter-(mocked-for-submission)-tools:-vs-code
  • summarizer
Share this project:

Updates