clerk

clerk is a double agent for e-commerce: it assists shoppers like a sales clerk, while also tracking user feedback like a record-keeping clerk, helping businesses refine products and boost conversions.

Comment

Inspiration

Shopping online can be overwhelming with so many options and unclear product descriptions. We wanted to create a smart shopping assistant that helps users quickly gather insights about products, compare alternatives, and make informed decisions that are all within a seamless Chrome extension.

What it does

clerk is a Chrome extension that:

  • Reads the URL of the product you're viewing
  • Scrapes product details and similar recommendations
  • Displays LLM-powered insights based on product descriptions

How we built it

Frontend: Built using TypeScript, JavaScript, and HTML/CSS, the extension interacts with the browser’s active tab, fetches URLs, and displays chatbot responses in a sleek UI. Backend: Manages user queries, stores messages, reads product data, and returns AI-generated responses from a custom-built chatbot using llama. All through file based communication Webscraping-Extracts product details, specifications, and user reviews from e-commerce websites.

Challenges we ran into

  • Initially, the extension required manual activation. We had to implement background scripts to capture and update URLs automatically.
  • The chatbot’s responses didn’t appear instantly, so we had to adjust file monitoring and reloading mechanisms.
  • We had to rotate user-agents and introduce delays to avoid getting blocked.

Accomplishments that we're proud of

  • Successfully built a seamless chatbot experience inside a Chrome extension
  • Integrated real-time web scraping to fetch product details
  • Overcame CORS and URL tracking issues to ensure smooth functionality
  • Designed a minimal and stylish UI that enhances the user experience

What we learned

  • How to integrate background scripts for continuous webpage tracking
  • The importance of handling CORS & security permissions in Chrome extensions
  • Web scraping best practices and avoiding detection on e-commerce sites
  • How to build file-based communication between a browser extension and a backend

What's next for clerk

  • Automatically apply filters based on user-provided search parameters.
  • Price Tracking: Add alerts for price drops and historical trends.
  • Expand to more websites
  • Mobile App Version: Bring clerk’s shopping assistant to iOS & Android
  • Improve UI

Built With

Share this project:

Updates

Submission history