Chrome Extension Competition

Following a presentation on Chrome extensions during our web development team meeting, we decided to run a competition to see who could build the best extension. Chrome extensions are simply made up of HTML, CSS and JavaScript, so the possibilities are endless. Given a month to produce something - and a prize of Amazon vouchers up for grabs - the competition was on!

Here, in their own words, is what our developers came up with:
 

DOMBLOCKS by Nick Watton

My ambition was really quite simple. I wanted to make a game. Something where you click the extension and waste a minute or two. I also wanted to make my game out of the very fabric of a webpage. To grab any page, even the most boring, and create a simple pleasure.

DOM-Blocks - Instruction panel.png

An old school Breakout style affair seemed like an achievable target. All I had to do was grab a set of page elements, mark them as game sprites, and bounce a ball around registering collisions.

The game is very minimal. Paddle and ball DIVs are appended to the page, together with a canvas for the particle trail on the ball (I couldn’t resist). Game sprites have a coloured border that’s removed when they are ‘destroyed’.

dom_blocks_bbc.jpg

I initially thought about literally destroying page elements, but I now consider the coloured border route a ‘my-boss-is-approaching’ feature: a single key stroke instantly reverts the page to its original state, and you can innocently crack on with your work.

I wasted far too long before realising I had to run Chrome Canary. My initial pop-up worked in standard Chrome, so I thought my main code was at fault when it didn’t run. I also spent an age finding the right image for my ball, but otherwise the build was pretty quick and straightforward.

It was really fun exploring this technology for the first time, and I can definitely see myself looking to work on further applications, both serious and trivial. 

Download the extension here*:
http://labs.realise.com/chromeextensions/dom_blocks.crx

 

Rude W*rd Bl*cker by Laurence Cliff

Rude W*rd Bl*cker allows the user, perhaps a parent, to block out rude words and images when a web page loads.

I had previously created a Chrome extension that highlighted innuendos on a page and allowed the user to copy/quote the phrase by simply clicking an adjacent icon. For this competition, I decided to pretty much do the opposite and block out rude content. This was driven by recent articles in the press about more and more children being active online and being exposed to offensive/adult content. The aim of this extension is to provide parents with a bit more control over what their children see online.

images-blocked.jpg

There are three levels of strictness, giving the user control to:

  • Block as many rude words as possible
  • Block most swear words but allow less offensive words
  • Block only the strongest swear words

On top of this, with an assumption that a page with many rude words is likely to feature rude images too, they can decide whether to block images based on the number of swear words found on that page. The number that triggers this is up to them.

As a further level of protecting the viewer from rude content, there is another option to block out the page if too many swear words are found.

blocked-page.jpg

The extension pipes the options page direct into the popup for easy use, rather than navigating away to a new tab to change your preferences.

Once the extension is installed the functionality runs automatically without the user triggering it. Alternatively, the user can deactivate the plugin but keep it installed.

The extension uses three arrays of strings: mild, strong and extreme. The strictness level determines how many of these arrays are combined to be checked against when the page loads. These lists are currently put together by the developer, but more words could be added through an extension update or by allowing the user to create their own list in a further development.

Content on the page is then checked against the listed words. If there's a match, a span is wrapped around the word and the letters are replaced with asterisks so that highlighting the text doesn't reveal the rude word either. The span around the word is styled to be a black block.

For the image replacement, the script checks the number of rude words blocked and tests to see if it is higher than the number set by the user. If it is higher it gets all images on the page, calculates the height and width of each image and grabs a replacement image from placeholder.com with the same dimensions.

The extension uses Chrome storage to save the user's preferences. On page load, the preferences are checked against to determine which functionality should run.

Download the extension here*: 
http://labs.realise.com/chromeextensions/rude_word_blocker.crx

 

Clickbait Assassin by David Storey

Over the past few years there has been a noticeable rise in clickbait-type advertising, usually appearing at the end of blogs and articles, and often falsely labelled as “other things you might be interested in”. Whilst I’m highly appreciative of the complexities of finding a happy place in the world of advertising and not having to pay for content as a user, I particularly dislike clickbait for the following reasons:

  • The content is rarely of interest to me
  • There is little or no creative/artistic value – unlike traditional advertising, clickbait is not easy on the eye
  • The content is often distasteful, playing to the basest of human emotions, e.g. “you won’t believe what she looks like now”
  • The links are crafted to be as tempting as possible to follow, meaning you actually have to exert mental energy to not click on them –the very presence of clickbait on a page robs you of internal resources
without-extension.jpg

Therefore, I wanted to create a tool that would just automatically remove clickbait from my day. There are of course ad-blockers which would achieve this, but I didn’t want to block advertising altogether. aAs I said, I appreciate that ads are an important part of what keeps the web free. Plus, sometimes advertising can be beneficial; you might learn about a service of actual value, or at least be treated to a nice little animation.

settings.jpg

Fortunately, the abilities offered by a Chrome Extension make it very easy to block clickbait. You can manipulate or block any web requests made by your browser, so I just put together a “black list” of domains I didn’t want to receive traffic from. I used that to filter all outgoing requests from Chrome, dropping those going to known providers of clickbait. After some research, I’d collated a list of the biggest culprits to be added to my black list, but also included the option to modify this list, either adding or removing domains.

with-extension.jpg

 

The result is a Chrome extension that doesn’t appear to actually do anything, but underneath is providing a very valuable service. I accidentally deactivated my extension after just a week of using it and quickly noticed the difference it had been making to my web browsing.

Download the extension here*:
http://labs.realise.com/chromeextensions/clickbait_assassin.crx

 

Colour Palette by Joe McDowell

colour-palette-2.jpg

My inspiration for this Chrome Extension was a disliking for plain white websites. I wanted to create something that allowed the user to change the colours of the website they were visiting.

To add further complexity to the app, I calculated the new colours’ opacity of elements on the page based on their original contrast to the original background colour. Clicking on the Chrome Extension’s icon will cycle through different colour schemes at random. This could be used or further developed to aid colour blind people to choose a colour scheme that allows them to view the page better.

Download the extension here*:
http://labs.realise.com/chromeextensions/colour_palette.crx

 

And the winner is…

The competition entries were presented during our web development team meeting and everyone voted for their favourite. The winner, much to his surprise, was Laurence’s Rude W*rd Bl*cker.

Congratulations Laurence! We hope you enjoy your vouchers. Just don’t buy anything rude!


*To try out our Chrome extensions, follow these steps.

Click the extension link to download. Next, download Google Chrome Canary. Once Canary is installed, open the browser and paste the following into the address bar:

chrome://extensions/

Locate the downloaded extensions and drag and drop them into the chrome://extensions window. You may need to then click the “Enable” checkbox, the icons will then appear in the top right of your Canary browser.