Since the first days of Chrome extensions it was clear that they are very powerful way to extend your browser and make it do stuff you care about. However, while it was good, we knew that it can get better… and this is why we have in dev channel the ‘Event Pages’. Let’s start by defining what are those pages:

• Background pages – give your extensions the ability to have a single long-running script to manage some task(s) in the background. This can be a certain state of your app or long pulling of information that you wish to show the user (e.g. amount of unread emails).
• Event pages – are very similar to background pages, with one important difference: event pages are loaded only when they are needed. When the event page is not actively doing something, it is unloaded, freeing memory and other system resources. Please remember this feature is currently only in dev mode.

It seems that with Event Pages our Chrome will be able to  reduce the memory foot print that is used by some idle extensions. It’s an important evolution from the state of background pages that run all the time. An event page only runs when it is handling events. Once an event page becomes idle, it is unloaded, freeing memory until the next time it’s needed. To help event pages support some important use cases, we’re also have new APIs.

• The alarms API allows an extension to wake itself up at set times, to support features like: cron jobs type of activity, periodically syncing, anything you wish to do over time in specific timing.
• chrome.runtime new events let extensions know when they have been installed, or when their event page is being unloaded. It is also giving the developer an option to have a ‘last error’ handler.
• chrome.declarativeWebRequest – A declarative version of the webRequest API lets extensions do network interception without the need for a background page at all. It also works much faster than the chrome.webRequest API because you can register rules that are evaluated in the browser rather than the JavaScript engine which reduces roundtrip latencies and allows for very high efficiency.

Final Notes

• Learn more from the event page documentation.
• There is a good source for more information on Chrome Extensions in Chromium blog
• There are so many option to use the new event pages with the bluetooth API…
• Btw, @rem did it again with a new (amazing) version of JSbin – Go check it out and see how great logos ‘steal’ the show… Why I’ve added it here? because it’s a powerful online tool that let you test your app/extension and share your code before you upload it to Chrome web store. I’ve used both jsbin and jsfiddle in order to get feedback on some short code.

Chrome extensions are very powerful way to make Chrome (even) better. They give you (=the developer) a lot of power to extend the functionality of the browser and gain more productivity and power in daily tasks. In this tutorial we will learn how to create a basic extension that give you the power to open all the special information pages that Chrome offers. For the ones that wish to see code of a more complicated extension that does some networking and notification – You might want to have a look at the work of my friend Mr. Smus on ‘Stackoverflow notifier‘. Ok, let’s start to role.

Getting started with your first extension

We will take for example the case of opening some Chrome internal pages. I’ve wrote this extension more then a year ago because I wanted ‘one-click’ from many interesting internal pages that chrome give developers that want to have a look at some internal parts. For example:

• chrome://flags
• chrome://dns
• And many more can be found: chrome://about/

Browser Action or Page Action

We could choose that the user will see our extension all the time with a little button that will be place on the right side of the browser or to have our activation icon popup inside the address bar (the omni box) only when the user get to the page that our extension is working on. In our example we want the user to be able to activate the extension all the time so we will go with browser action.

The first thing we need to write is a short manifest file that describe our extension. You can see we declaring some trivial fields like: name, version, icon and more important ‘permissions’. This will give the user a warning dialog during the installation process to warn about the permissions that our extension will have. It’s good practice to use as little as possible since it will improve the confidence users will feel – thus, you will have more installations. Another good tip is to invest the time and effort to use great icons/graphics. It will also improve the user experience.

manifest.json
{
  "name": "Chrome Short Cuts",
  "version": "0.1",
  "description": "Show short cuts and tips on Chrome",
  "icons": { 
	"48": "app-icon-48.png"
   },
  "background_page": "background.html",
  "permissions": [
    "contextMenus"
  ],
  "browser_action": {
    "default_title": "Display short cuts and tips",
    "default_icon": "toolbar-icon20.png",
    "popup": "popup.html"
  }
}

After we have our manifest file we need to code (fun time) the logic/data/ui of our extension. Here is our simple code of popup.html:

After we wrote some code, it’s time to upload the extension to our chrome and test it. You can do it by going to: chrome://chrome/extensions/ and click on the button ‘load unpack extension’. You can see it below:

Once you click on the button you need to navigate to the directory that contain the manifest file and your html/js/css files. Once you click on ‘select’ the new extension will be added to the list of extensions and you should see its button on the toolbar (right side of it). You will continue to work and improve your functionality… and once you are happy with the results it’s time to publish your work to the Chrome Web Store. I’ve wrote about this process in the past here: How to get your web app and/or extension into the Chrome Web Store.

Is it simple or what?
Please let me know if you have any thoughts on the process and how we can improve it. Also, if you have good (to great) ideas to extensions – please share them…

Final notes

• You can set an option page so your users will be able to set their preferences. In our simple case, there is no point.
• Background pages –  answer a common need to have a single long-running script to manage some task or state in the background. For example: check the page for certain keywords, links, check status of some web service etc’.
• How to OAuth2.0 from extensions
• A great source for extension developers is this guide.