Quote Keeper

Go back to the list of projects

Quote Keeper is a Google Chrome extension to save your quotes while you are browsing the news. It's designed to help journalists as an 'in-browser' database to store and quickly retrieve informations.

Project Purpose and Goal

In my previous life as a journalist I used to collect quotes from various people while reading the news. A good quote is a very useful piece of information to display in an attractive way if you are building an interactive longform for example.

But I found my Excel sheet to be quite heavy, that necessitates a lot of copy-pasting. I wanted to develop something easier that I could use directly in the browser, so why not a Chrome extension?

Quote Keeper

Problems and Thought Process

Creating a Chrome extension was totally new to me, and much to my surprise, I learned that are developed with the common everyday languages of the web: HTML, CSS and Javascript.

My extension has a simple job: storing quotes that can be easily extracted from a webpage. First it basically creates an additional Context menu to trigger the text extraction, and it generates a simple form that it's injected onto the page, to save the data with additional informations like tags and authors.

Quote Keeper
Quote Keeper

Instead of relying to a database, I use LocalStorage to store the quotes, which are then displayed in a simple table on different page, which I can navigate from the main extension popup.

I use LocalStorage because this extension is designed to be like a temporary repository. I give the option to search for specific quotes, or to download them as a CSV.

Quote Keeper

Lessons Learned

Despite being made in HTML, CSS and JS, Chrome extensions have a specific syntax and a structure that must be followed to make them work. The biggest hurdle was getting used to this model, and required a narrow perusing of the documentation.

However it opened a new realm of possibilities, to be able to create a simple but very specific product that can make a job easier, while staying in the browser environment.

Go back to the list of projects