I was inspired to make History Visualizer when I was trying to find a programming tutorial in my Chrome History and I couldn't find it anywhere. The User Interface was horrendous, every search yielded dozens of results that I didn't recognize and there was no clear structure where certain things would stand out when I found them.

What it does

It organizes history into a graph, with the nodes being the tabs that someone visits and the edges being redirects or clicking on links between them. Tabs that you used for longer have bigger nodes than others, and all tabs are organized into groups such as School or Debate or Personal Project or Video Games. You can also compare the time that you have spent on certain categories through any range of time.

How we built it

We made a Chrome Extension with a "backend" and a "frontend" written in Javascript. We used ReactJS for the frontend and used message passing with Content Scripts to monitor individual tabs. We also used Chrome's Storage API and Session Storage API to store history data and group data per tab, respectively.

Challenges we ran into

As this was our first time making a full-scale Chrome Extension, we ran into many issues with implementing basic concepts such as message-passing, the choice of many different storage solutions and faulty ReactJS integration with Extension pages.

Accomplishments that we're proud of

The frontend ended up great and everything that we learned about Chrome will definitely help us to make great apps in the future. We are glad that we could get most functionality in, despite some small bugs in certain features.

What we learned

We learned all about Google Chrome extensions, message-passing concepts and storage paradigms.

What's next for History Visualizer

We will fix the bugs in it and add comprehensive Chrome Sync functionality, "productivity mode", collaboration and automatic citation generation.

Share this project: