nemrod.se Various guides and experiments

Google Chrome Extensions Usage Guide


There are probably a lot of people who can’t live without their extensions for Firefox, and missing out on the by far (in my opinion) best browser currently available. Google Chrome. It was a problem for me too, until I found out by accident that the developer channel of Google Chrome actually supported extensions, though they were incomplete and even required a special flag to be set when running the Chrome executable. Even then, I felt I had to check this exciting feature out, and boy was I surprised when I found out how easy they are to make and use and how well they work! I quickly made a few quick extensions using most of the techniques available. The most popular is the PageRank Display extension, the first one I wrote, which has users all over the world and linkbacks from all the way over in Japan and Korea.

Even though there are a few online communities about Chrome extensions a lot of people are probably missing out on extensions, first of all because they’re not enabled at all in the stable channel and second because you previously needed a special flag in the shortcut even on the dev channel. If you haven’t already I strongly urge any Chrome users to switch to the dev channel, it is much further along the development and though it says it can be very unstable at times is has been extremely rare for me. It can be done here: switch between stable/beta/dev channel. The flag in the shortcut isn’t a problem once you have the dev channel anymore, last week when they finally made it the default to have extensions enabled in the dev channel (along with some UI changes I’ve been looking forward to).

Now, how do you use extensions in Chrome? It’s really very simple. All you have to do is find a link to an extension and click on it (or if you have an extension file (.crx), you can just drag it to your Chrome shortcut). After accepting the download Chrome will pop up a message asking you if you want to install the extension, which of course you do (unless you distrust the source of course). After that the extension is installed instantly (no need to restart Chrome like you do with Firefox) and you should see any UI the extension adds. Regarding UI, there are four types of them:

Toolstrip:
The toolstrip is a bar at the bottom of your browser window. It automatically allocates enough space to fit the extension since Chrome values the screen real estate of their users, something I greatly appreciate. In the toolstrip there can be basically anything, buttons, links, information, checkboxes, etc. The toolstrip can be hidden with the shortcut ctrl+alt+b. It’s the most common form of extension UI.
Moles:
Moles are pretty much an extension of the toolstrip. When you hover over an extensions allocated space in the toolstrip the name comes up. When you click the name you can open a mole (if the extension has created one) which is kind of like a popup page that shown up above the toolstrip. You can, for example, use the toolstrip to display some information and a form with checkboxes etc. in the mole for setting up what and how to display things.
Content scripts:
Content scripts are pretty much like user scripts (i.e. Greasemonkey, javascript files run on selected pages, Chrome has regular user script compatibility too, where you download a script and put it in a folder) in the form of an extension. Besides the possibility to combine other extension features with user scripts (called content scripts) it also gives auto-update and easier installation etc.
Page actions:
Page actions are used when you want the option to do things with a certain page. What it does is give you an icon in the omnibox (address bar) for the extension on the pages where it can be run. When you click on the icon the extension does something with the page. For example the extension can detect when a page has an RSS feed available and enable the page action for the page. An RSS icon will show up in the address bar which will e.g. add the feed to your Google Reader account when clicked.

An extension can combine any number of them in any combination and can communicate between them (as long as they belong to the same extension).

Once you’ve got the extensions there might be some you want to remove again, or you might simply want to see what extensions you have installed, versions, etc. To do all of this all you have to do is browse to chrome://extensions. Once there you can remove, add extensions from file, add unpacked extensions (they’re packed in .crx files, before that they are folders with html and javascript files in them) and force check for updates. You will see a list of all installed extensions as well as their version and a description.

To test how extensions work I suggest you to visit the official sample extensions. As of now there are three sample extensions there:

Gmail Checker

Displays the number of unread mail in the toolstrip.
GMail toolstrip

Subscribe in Feed Reader

Uses page actions to subscribe to a feed.
RSS Page Action

BuildBot Monitor

Shows the status of the Chromium Build Bot (probably not interesting to a regular user).
Buildbot 2

These are two simple extensions that I wrote for some basic SEO work:

PageRank Display

Shows the PageRank of the open site in the toolstrip.
PageRank for nemrod

Alexa Rank Display

Shows the Alexa Rank of the open site in the toolstrip.
Alexa Rank for nemrod

To find more Google Chrome extensions I suggest you visit Chrome Plugins. They’ve got discussions and a lot of extensions posted by users, for example for mouse gestures, translation, smooth scrolling, session saving, weather, alarm clock, video downloader, etc.

I hope this’ll get anyone still using other browsers because they’ve got extensions they need to switch to Chrome – it’s got a fair number of great extensions already, and an excellent and easy-to-use extensions API for creating new extensions in case there doesn’t yet exist one with the functionality you require. :)


Posted in Guides | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *