Inspiration

Imagine a world where answers are just a click away, seamlessly blending into your browsing experience. Inspired by the frustration of constantly toggling between tabs, we crafted a AI-powered Chrome extension chat box. Our innovation transforms the way users engage with information, providing convenience with a simple highlight-and-inquire feature.

What it does

What it does is allow users to open our AI-powered chat box (a side-panel) through the context menu, as well as instantly prompt web content into the chat box through the context menu. It helps speed up users' learning and troubleshooting processes and provides a smoother workflow. Say goodbye to the hassle of navigating to external sources; say hello to a smarter, more efficient browsing experience. Our solution is not just a chat box; it's a bridge to instant knowledge, always within reach, anytime, anywhere.

How we built it

  • Chrome Extension Framework
  • React.js
  • Tailwind CSS
  • Gemini API
  • Chrome API

Challenges we ran into

  1. Integration Hurdle with React When using the React framework to build our Chrome extension, we discovered that the side panel, constructed with React, lacked access to the browser's contents—a crucial feature for our project. To address this challenge, we delved into the Chrome extension documentation and refactored our React files. We incorporated service-worker.js and content-scripts.js, successfully establishing a communication bridge between the side panel and the Chrome browser.
  2. Small inconveniences When developing the UI with Tailwind, the Chrome extension development tool doesn't support live updates. We have to consistently run "npm run build" and re-upload the folder to test our changes. Additionally, there are multiple consoles that we have to monitor throughout the development (popup.js, sidepanel.js, service-workers.js, each has its own console).

Accomplishments that we're proud of

We finished our project :D

What we learned

How to build a Chrome Extension

What's next for AskGenie

We aim to further empower users by summarizing their conversations into concise, user-friendly bullet points. This invaluable feature ensures that users can effortlessly revisit and reference their past interactions, eliminating the need to repeat questions. Our chatbox becomes a personalized knowledge repository, allowing users to build on their insights and experience a streamlined information retrieval process. It's not just about answering questions instantly; it's about creating a seamless and intelligent knowledge-sharing experience for the user, revolutionizing the way we navigate and learn in the digital landscape.

Built With

  • chrome
  • chrome-extension-framework
  • gemini-api
  • react
  • tailwind
Share this project:

Updates