TabStash

Tired of having too many tabs open? Do you lose track of important links because you had too many pages open? TabStash lets you intelligently save your tabs for later!

Comment

Inspiration

Ever feel cluttered from too many open tabs? Does your computer slow down to an unbearable speed as you're opening yet another tab? As students and software developers, we frequently find ourselves going down rabbit holes researching new technologies and new interesting topics. That is why we decided that we needed TabStash - it helps you declutter and consolidate information as you're looking thing up without having to lose any link or being overwhelmed by too many open tabs!

What it does

TabStash is a 2-in-1 Chrome extension paired with an online dashboard that allows users to store, organize, and view crucial information that they gathered while they were surfing the web. It leverages Co:here's language model to generate insightful summaries and answers to questions for a given website. Through the Chrome extension, the user can save descriptive blurbs along with the URL of the page they are viewing for later, allowing them to close the tab without worrying about losing it. They can then log into their user dashboard using their Google account to access all of their saved "Stashes" and filter them by topic to see the most relevant information.

How we built it

  • Chrome Extension: HTML, CSS, JavaScript
  • Website Frontend: React
  • Backend: Django, Postgres, OAuth, Supabase
  • External API: Co:here

Challenges we ran into

  • Sending messages between JavaScript scripts in the Chrome extension
  • Fine-tuning Co:here's API to generate summaries that are relevant enough without being too similar to the original text
  • Setting up 3rd party authentication using OAuth and Google's authentication API
  • Sending requests from the Chrome extension to the backend server since we could only send requests in specific scripts

Accomplishments that we're proud of

  • Building both a Chrome extension and a website frontend along with our backend persisting the data between the 2 user interfaces
  • Integrating authentication using OAuth and Google's API
  • Fine-tuning Co:here's language model to provide relevant blurbs for a given website

What we learned

  • It was our first time developing a Chrome Extension so we were able to learn a lot about how they are made. For example, we needed to send requests to our backend server and had to configure our scripts to send messages to each other.
  • How to send requests to API endpoints from Chrome extension scripts
  • We learned a lot about how to work with Google's APIs, especially when it came to authentication and integrating it with our applications.

What's next for TabStash

  • Make the interface even more customizable by giving the user the option to save several "Stashes" per website and storing stashes in different folders
  • We want to allow users to find the "Stashes" they are looking for more efficiently by allowing them to search on keywords
  • Improve loading speeds by caching data
Share this project:

Updates