I spent all summer building a Chrome extension - Here's What I Built

This summer, I set off to build a productivity-based browser and ended up building a Chrome extension. Here’s how the process yielded a product that, while smaller than I initially wanted it to be, set me on the best path possible for future success:

But first, a little background information.

I have been coding since I was ten years old, and haven’t stopped since. I attended multiple bootcamps and academies, learning as many new concepts as I could. A year ago, after ending a long stint of failed projects and multiple camps attended, I decided that I wanted to take my skills and create a full-scaled project aimed towards a subject matter that I had been adamant about: human-computer interaction(or HCI).

From my point of view, the way that we currently interact with computers, especially desktops, is too multi-layered and outdated, given how many resources and new outlets of technology are available. In a society that is so heavily dependent on computers, designers and developers alike owe it to users to create interfaces that are powerful and easy to use. In addition, interfaces should not interfere with the user’s life in the physical world, nor should they draw users away from the natural world. Computers should be an efficient and ever-lasting aid instead of a distraction or a threat.

Take my MacBook for example:

Let’s quickly examine this interface, run and controlled by MacOS software. My main workspace is my browser, in which I have multiple tabs open. The main functionality of the MacOS desktop is a set of windows, each controlled by a different app. For some people, there are already enough readily-accessible functionalities to get certain tasks done. For example, someone who doesn’t use a laptop much might find this layout ok if they only use their MacBook to view photos and listen to music.

However, more and more people are starting to live their lives through user interfaces. Everything from medical records to project research to communication with family members to tax forms live within one’s “tech ecosystem”. Although many users rely so heavily on these user interfaces, it is becoming difficult to manage where data is coming from and how data should be interpreted. In addition, we shouldn’t forget that technology is a tool — we need to make sure that certain tasks, such as browsing the web to research something or listening to music, can continually be an easy task that can be performed through as many mediums as possible.

For example, let’s observe how I interact with computers. I use my laptop to do schoolwork, work on projects, stay in touch with my family, edit designs, read emails, and generally browse the web. I use my phone to view information at-a-glance, read the news, and listen to music.Whenever I want to do something(especially on my laptop), I have to dictate that action and I have to be precise in where/how I would like it to be executed. If I, say, want to begin researching an artist I had just stumbled upon on Spotify, I not only have to integrate this action into a space that holds other, non-related actions(e.g. a browser with multiple tabs), but I have to dictate precisely what I’m looking for.

In essence, the modern human-computer interface is lacking intelligence and ease-of use.

So, you might be wondering. What does this all have to do with a Chrome extension? As I mentioned earlier, I started workshopping this idea about a year ago. It took me a while to get to the point where I felt comfortable enough with the idea that I could start formulating an actual product.

At the beginning of the summer, I set out to take all of these ideas that I had workshopped and create a new browser using Electron.

The idea itself very closely follow the description from earlier, but I ran into many technical challenges while beginning:

Databases

As I started developing this project, I was thinking about which database I wanted to choose and what security features should be integral to the product. I ended up stumbling across a super-exciting library called GunJS, which is an offline-first, decentralized database. Not only does it have military-grade encryption and is written in JavaScript, but it’s very powerful and rather easy to use.

As I started experimenting more and more with GunJS, I realized that I did not have enough time or desire to include as many GunJS-based features as I had thought. Anyways, after spending too much time solving bugs on some of these features, I realized that I needed to put those ideas to the side and actually finish the product.

2. Electron + React

I chose to use Electron for this project because I could build for MacOS, Windows, and Linux simultaneously. I also chose to use React with Electron, so I could make sure that my project was organized and responsive. Initially, my plan was to utilize Electron’s <webview> tag as a way to load websites and track history. Although I would be losing the encryption and privacy standards that I would have if I was building off of Chromium, <webview> seemed like it could be suitable for all of the app’s functionalities.

However, it took me a while to figure out how I could render the tag, which is a part of Electron’s API, into React’s DOM(and, therefore, as JSX). This issue, just like some of the others, only sped development time down, and made it unable to just build out the important features of the app, such as online action management.

3. Main Functionality

I knew what I wanted to make, but I kept striving for too much on my first build. I couldn’t stop adding new functionalities that I lost focus on the main purpose of the app: to help users keep actions online organized. So, instead of writing out this entire browser, I decided to get my ideas into the hands of the people and validate my value proposition.

From there on out, I decided that I would create a simple Chrome extension that allows users to manage what they’re working on by grouping related tabs together.

The rest of the extension’s development was rather easy. I removed extraneous features, including using standard React state and browser local storage instead of GunJS, and focused more on the logic of the app.

So, what’s the point?

Why am I telling you this story? Why did I waste my time on a project that I ended up scrapping? Why did I vie so hard to validate my value proposition?

Although there are many features of this idea that I would like to develop, the most important part of this product is user action. Unlike other services, which are built around a business(take Postmates or Uber, for example), this product is designed to make it easier for users to browse the web and keep their online lives organized.

The importance of this Chrome extension isn’t necessarily the functionality, but it is the user response. It is seeing how users use this product and learning how to adapt those patterns in a way that makes our standard GUI as responsive and straightforward as possible.

And although the final product turned out much different than the original idea, I feel like I’ve found a way to test my idea and use the experience to develop what’s next.

Install the Chrome extension here and let me know what you think of it!