Charles Engelke's Blog

May 18, 2010

Google Chrome Extensions 101

Filed under: Uncategorized — Charles Engelke @ 11:48 pm

My second Google IO Bootcamp session, presented by Antony Sargent.

I hope I can find his slides on-line. They are based on this HTML5 presentation that’s been floating around. At least, it looks like it.

Chrome Extensions are written using HTML, CSS, and JavaScript. HTML5 is giving you many more capabilities already, even without writing new extensions. Native code is coming; it runs in sandbox of the browser. But that’s not what we’re talking about now.

There’s a gallery of extensions at chrome.google.com/extensions. In general, you can post any kind of extension there. No review process unless your code uses certain restricted APIs (in which case you’ll have to sign something indemnifying Google).

Extensions are easy to install. Click on a link and download.

Writing extensions is “Like writing a website” (where all your users have a really fast, standards-compliant browser). But they add some simple APIs for things a regular web page can’t do.

  • bookmarks
  • history
  • i18n
  • processes
  • tabs/windows

Start an extension with manifest.json file

{
   "name" : "Sample manifest file",
   "version" : "1.0",
   "permissions" : [...],
   "description" : "My first extension",
   "icons" : {
      "48" : "icon-48.png",
      "128" : "icon-128.png"
   }
}

Permissions is an array of permissions you need. For example, you can say you want to use cross-site Ajax requests.

You develop extensions right in Chrome itself. You need a text editor, nothing else special.

Enter the URL chrome://extensions/ (or use a menu choice to get to Extensions manager). Click on “Developer mode” to get buttons for development. Put your work in a single folder, and point to it here.

“Isolated Worlds”. Your content script for your extension can see the DOM, but not JavaScript locals in your own page.

Introducing the background page. Not displayed anywhere, but “rendered” by the browser in a hidden page. This is where you’re going to register listener functions, etc. There are APIs for this background page and your content page to communication with each other.

Much of the API is asynchronous.

Experimental APIs need to be enabled with command line options when launching Chrome.

We went very fast and covered very detailed items without enough time, but detailed documentation is all on-line. Seems easy for web developers. I’m not sure why I want to do this, though.

Advertisement

Create a free website or blog at WordPress.com.

%d bloggers like this: