I’ve been looking for an excuse to learn how to make Chrome extensions ever since I read this great article about how a little knowledge in this field can take you a long way. So to the bewilderment of my family, when inspiration struck late on Christmas day 2013 I got straight to work building Context, my first attempt at a Chrome extension.
Tl;DR? Here’s the link to install Context into Chrome. Go to any Wikipedia article to see it in action.
Why?
Context grew out of my frustration with using Wikipedia. Years ago, my brother told me about a book he read that described a study which seemed to show that people retained less information after reading a piece of text if it was peppered with hyperlinks (a la any wikipedia article). The explanation for this seemed to suggest our minds subconsciously imagined where these links might lead; what information was hidden behind that blue underlined word? This explains the fall in information retention.
From first hand experience researching a Philosophy essay, I know how annoying it is to come across a word I don’t know the meaning of and going through the tedium of opening in a new tab, reading up on the subject and then closing that tab and finding my place back in the original article.
Context is with a view to quash the breaks in flow as much as possible. With it installed and open on a Wikipedia page, clicking links brings up a summary of the linked article in the current page you’re viewing and highlights the clicked link so you can easily rejoin the main article where you left off.
How?
Context is quite simple under the hood. It basically comprises a couple of different open source thingys stuck together with jQuery. I started with Extensionizr, a brilliant boilerplate generator for Chrome extensions that, at the slight cost of hiding some of the inner workings of Chrome extensions from me initially, saved me a good hour and a half getting my creation off the ground.
Setup so I could manipulate the DOM of any webpage I desired (in this case all Wikipedia articles) I put together a script that intercepts relevant link clicks and hits the Wikipedia API for a summary. It was at this point I discovered a thing called wikitext exists.
As my 5 minute googling session would have me understand, wikitext is the format wikis use to store their pages in databases. I’m sure there’s a perfectly good reason for this, but I was kinda stumped by this for a while. The first release of the extension (v0.0.1) used a pretty crappy regular expression to extract the first chunk of text between two <p> tags to varying success. You can imagine my relief when I discovered Remy Sharp’s wiki2html parser. Problem solved. This was bundled into v0.0.2 which at the time of writing is the latest version.
What’s Next
I’m currently working on being able to resize the size of the context box my clicking and dragging, in the process realising the true extent of my CSS ignorance. I’d like to implement a recent history list somehow so you can click back through your recently looked at ‘contexts’ (as I’ve come to call the snippets of information), but I haven’t begun any work on this yet. More blue sky ideas include extending Context beyond the scope of Wikipedia, providing an easy, familiar and ubiquitous interface for peaking behind links where it might be useful too. (Just where and when that might be I don’t know…)
Finally
As I mention in the description on the Chrome webstore listing, Context is still very much in beta. I’m eager for everyone to test it out and break it as much as possible. Let me know how you get on via twitter or email (me[at]jeshua[dot]co). The same goes for feature requests or offers to collaborate or port it to other browsers.
Install it by clicking here. What are you waiting for?
Jeshua Maxey 
One thought on “Context – An Extension For Chrome”