Chrome extensions are most often used when surfing the internet and gathering information. We realized that being able to extract the most important information from lengthy articles would be incredibly helpful to anyone using the internet, including small and medium-sized businesses, which would help them save time and money.

What it does

Summarizer is a Google Chrome Extension that utilizes a popout script, a content script, and a background service-worker that all work together to summarize articles at the click of a button. After receiving a message from the popout script, the content script first traverses the DOM and extracts and parses out text we classify as the article. This text is then passed as a parameter in an API request to access natural language processing features which then transcribe a summary which is then outputted back into the popout through manipulation of the DOM.

How we built it

The Summarizer Google Chrome Extension was built using HTML, CSS, and Javascript with heavy use of Chrome's Messaging API and OpenAI's closed GTP-3 beta access. The extension uses a background service-worker to make an external API call, a content script to manipulate and access the DOM of the active tab webpage, and a popout script which is used to display information to the user and provide the user with the ability to interact with the extension. Each of these scripts relies heavily on a built-in Google Chrome Messaging API to communicate with each other, transferring information in mini get requests. Several of these messages are encoded using keys that tell each of the scripts when they should interact with a message they are receiving. For instance, the background script will not react to a message containing an error key (preventing an external API call from being made). The core functionality of this extension originates from an external API call made to a natural language processor, resulting in the creation of dynamic article summaries. The use of the singular API call always allows the extension to work fast, saving more time for the user.

Challenges we ran into

The challenges we faced were certainly not far and few between. Throughout the entire development process, we were juggling mistimed asynchronous functions, learning an entirely new development process, and struggling to manage our time effectively. We spent the first few hours trying to get a grasp on the differences between background service-workers, content scripts, popup scripts, and the whole range of different infrastructure used in the creation of google chrome extensions. We went through three UI phases where we fought the urge to reset and start over, ultimately deciding on a dark theme that embodied the simplicity and vision of the product.

Accomplishments that we're proud of

One of the challenges we had for ourselves that we knew we had to deliver on or we wouldn’t be proud of what we’ve done, is user accessibility. We needed to revolutionize consumer workflow and time efficiency with the click of a button. It’s what we set out to do, and it’s what we’ve delivered on. We are proud of designing a product that skips complexity in favor of simplicity and is focused on saving time and reducing the frustration of our users, delivering content in seconds.

What we learned

The biggest takeaway for us was to never be afraid and to just start. We went into this unsure of where we might pivot or what we could actually get done in the time allotted to us. We spent a lot of time stuck in this fear, spending more time thinking and less time actually doing. Coding is about thinking, yes, but it’s also about willing to put your time on the line and just doing. We came in with insecurities and fear of failure and came out realizing that with a little bit of confidence, perseverance, and willpower, you can overcome most of the challenges you’ll face in the IDE. I mean we also built our first google chrome extension and now can build more but that’s neither here nor there :)

What's next for Article Summarizer

We truly believe in the usefulness and market potential of Summarizer and therefore find it hard to leave what was such an integral part of our weekend in the past. Throughout the design phase, we brainstormed several additional features that we thought could add to the overall product without sacrificing simplicity and that we felt we had the vision to oversee. One such idea was the use of natural language processing to generate outlines of articles and outline individual ideas that we thought might be relevant to the user. Another idea was having the user input a topic and using natural language processing to identify “regions of interest” within the article for that specific user. Summarizer has the ability to save time and change how we consume long-form information on the internet and as such won’t be going away anytime soon- expect to see more from us.

Built With

Share this project: