Chrome Extensions Are Good for You

[XForce!]

Here at Big Spaceship we’ve been tooling around with extensions for Google Chrome and built an extension that instantly clears your browser’s cache with one easy click. Oddly enough, something that no other extension in the Chrome Web Store seems to offer. Read on to find out why that’s the case and how easy it is to build extensions for Chrome.


Why build a Chrome Extension?

Doing more and more HTML testing in Chrome, we’ve been running into the issue of cached files not refreshing after reload, forcing us to manually clear our browser cache. This can get annoying since the only way to natively do this in Chrome is to hit a hot-key combination or navigate to a menu item, wait for the settings tab to load, click on a dialog, close the settings tab again and reload your page with an empty cache. No problem if you need to do this once, but if you’re making many changes it can stack up to be a pretty annoying issue.

Strangely enough, we could not find an extension that offers a one-step solution in the Chrome Web Store, though there is one that brings up the standard dialog. After a little research, I discovered that there is support in the Chrome Extensions API to clear the cache directly, but it’s an experimental feature. The Chrome Web Store doesn’t allow the submission of any extensions using these features since they are, well, experimental. This doesn’t mean that we can’t develop an extension leveraging them though, which is exactly what we did.

Installing the Clear Cache Extension

To use the extension you will have to enable the Experimental Extension API by entering about:flags into your location bar in Chrome and click ‘Enable’.

After relaunching Chrome you can download the extension itself here: https://github.com/bigspaceship/Clea...e.crx?raw=true

The following paragraphs will show you the very basics of building a Chrome extension and what we’ve have learned from the process (spoiler alert: it’s really easy and you should build one right now).

Basics of building your first Extension

Chrome extensions are pretty much just little HTML pages that use JavaScript to access the browser’s internals and the DOM of websites you visit. To get started you will need to create a folder for your extension with a “manifest.json” file in it.

Example manifest.json:

{
    "name": "Fairly Magical Extension",
    "version": "1.0.0",
    "description": "Do magical things with Chrome"
} 

Even though it doesn’t have any functionality yet we just created a Chrome extension. To load it into Chrome open the Extensions Tab (enter about:extensions into your location bar or select “Window > Extensions” from the menu-bar) and make sure the “Developer Mode” check-box is checked.

Click on “Load unpacked extension…” and select the folder with your manifest.json file. Once you’ve loaded the folder your magical test extension should show up in the list below.

Bringing in Functionality

Now it’s time to breathe some life into our extension with functionality. Chrome offers three core approaches to do that :

• Browser Actions: Puts a permanent button in your toolbar and your code gets triggered once that button is clicked
• Page Actions: These are very similar to browser actions, with the big difference being that they are bound to specific domains and pages. Instead of showing a button in the toolbar they will only show a clickable icon in the location bar once the user visits one of the URLs that the extension is bound to.
• Background Pages: This type is probably the most powerful, since these are HTML files that run in the background permanently and allow you to run scripts at any time. Since it runs in the background there is no direct visual user interface for this type.

Each extension can mix any of these methods in a single package and it’s even possible to communicate between the different types. For our clear-cache extension, we combined a browser action with a background page.

Let’s start by adding a toolbar icon to our extension by adding a Browser Action.

{
    "name": "Fairly Magical Extension",
    "version": "1.0.1",
    "description": "Do magical things with Chrome",
    "browser_action": {
        "default_icon": "icon_19x19.png"
    }
} 

Feel free to use the image below if you don’t have a 19?19 image at hand:

To see the changes we made in Chrome we will have to tell it to reload the extension. Go to the Extensions window in developer mode and click the little arrow next to your extension’s icon to expand it and hit reload.

You should now see your icon right next to your location bar. You’ll notice that nothing happens when you click it, which makes sense since we haven’t assigned any logic to it yet. The easiest way to do this would be to add a pop-up. These consist of an HTML document that gets rendered in an overlay by Chrome once the icon is clicked. Any JavaScript code in this document will get executed when the pop-up is displayed, so we could place our logic here (more on Browser Actions).

Since we wanted our clear-cache extension to be as simple and unobtrusive as possible we didn’t want a pop-up window showing each time the icon is clicked, though. This is where our background page comes into play. Similar to pop-ups, background pages use an HTML file as entry point. Since they run in the background, the HTML never actually gets rendered visually. So typically the HTML code would only contain inline JavaScript or load external scripts.

The following background.html file will create an alert when the extension is loaded.

<script type="text/javascript">// <![CDATA[
    alert("*MAGIC*");
// ]]></script> 

To load our background page into the extension we’ll need to add it to the manifest file.

{
    "name": "Fairly Magical Extension",
    "version": "1.0.2",
    "description": "Do magical things with Chrome",
    "browser_action": {
        "default_icon": "icon_19x19.png"
    },
    "background_page": "backgroundpage.html"
} 

If you reload the extension it should show a magical alert window.

Now this will happen every time the extension is loaded, meaning every time you’d start up Chrome it would execute your code. Since we want to clear our cache by clicking on the icon though we’ll need a way to communicate between the browser action and our background page.

Luckily, the Chrome Extension API provides us with an event that we can easily plug in to.

<script type="text/javascript">// <![CDATA[
    chrome.browserAction.onClicked.addListener(function(tab){
        alert("*MAGIC*");
    });
// ]]></script> 

After you’ve reloaded the extension you’ll notice that the alert will only show up once you’ve clicked the icon in the toolbar.

Testing and Debugging

Albeit very magical, using alert windows won’t be the most efficient way of debugging once your extension has grown in complexity. Luckily, background pages can be debugged just like any other website in Chrome. All you need to do is go into the Extensions overview tab in developer mode and expand your extension. Here you’ll see a link to inspect the background page view.

Clicking here will open the Web Inspector and now you should be able to use the console and all the other developer tools you’re used to from Chrome.

The following article covers debugging for Chrome Extensions more in depth and also explains how to debug Browser Action pop-ups: http://code.google.com/chrome/extens...debugging.html

Deploying your Extension

Once your extension is bursting with functionality and ready to be unleashed on the public, you’ll probably want an easier way to distribute it than sending people a zipped folder that they’ll have to load. Chrome extensions are typically deployed as crx files, which are basically signed zips.

To create a crx package for your extension you can once again open the extensions tab in developer mode and choose “Pack extension” from the top menu. Choose the same directory that you selected for your unpacked extension. If this is the first time you’re packing your extension you can ignore the “Private key file” field and go ahead and click on “Pack Extension”.

If packing was successful, Chrome will have automatically created a key file for your extension. It is important that you keep this file to sign your extension for future updates.

You can now open the freshly baked crx file with Chrome, which should install your packed extension. If everything went well, you should now have your packed and unpacked extensions installed.

Now you can give people this file directly or – if you’re not using any experimental Chrome extension API features – you can submit your extension to the Chrome Web Store at https://chrome.google.com/webstore/developer/update.

Final Words

This pretty much wraps up our quick introduction to Chrome extensions. All the source code and files from this article are available on our github page at https://github.com/bigspaceship/Clear-Cache-Extension.

There is still a vast set of features that we haven’t discussed in this article. Google provides an excellent documentation for Chrome Extensions on Google Code: http://code.google.com/chrome/extensions/devguide.html

Here are a few things that we additionally implemented in our clear-cache extension that might whet your appetite to dig around the documentation a little:

• Options Page: Just like pop-ups and background pages options-pages are easy to implement by simply linking to an html file in your manifest. Once you’ve added the page to your extension you can access it through the extensions tab or by right clicking on the extension icon in your toolbar or location bar. Since you have full access to cookies and HTML5 web storage you can store any custom settings permanently.Hint: Since web storage stores everything as strings you can use JSON.stringify() and JSON.parse() to store more complex data.
• Automatic Updates: Instead of making users manually download new versions of your extension you can define an update URL in your manifest. This URL points to an update manifest XML and once Chrome detects that there is a new version available it will download and update the extension in the background.
• Animated Icons: In this tutorial we have only covered static icons for Browser Actions. Aside from additional, larger icon for the extensions tab and dialogs you can change browser action icons at runtime. What’s so neat about that you ask? The answer is: Animated Icons! YES!!! You can even pass in image data from a canvas element and script your own animation (Chrome Extension icon games anyone?).

Source

XForce! Reviewed by XForce! on 18th Jan 2012. Chrome Extensions Are Good for You http://i.imgur.com/JOPqd.jpg Here at Big Spaceship we’ve been tooling around with extensions for Google Chrome and built an extension that instantly clears your browser’s cache with one easy click. Oddly enough, something that no other extension in the Chrome Web Store seems to offer. Read on to find out why that’s the case and how easy it is to build extensions for Chrome. Why build a Chrome Extension? Doing more and more HTML testing in Chrome, we’ve been running into the issue Rating: 5

[ShareShiz]

wow nice article

+1 rep

[Mr Happy]

I made an easier tutorial on how to make a Chrome Extension for KWWHunction. Chrome extensions are among the easiest to make and don't break like FF. http://www.besthostingforums.com/92-...-how-make.html

FYI: if you copy and paste a tutorial it's good to say that.

[XForce!]

@Mr Happy Well I have got this article in some site around so I just shared it and if you have made something like that before I will appreciate you work but anyways I guess everyone have got the equal rights to post things out here.