Building Google Chrome Extensions 101

What is a browser extension?

Ways to add niche functionality to a browser that people want.

What do you build extensions with?

HTL, CSS and JavaScript

Lots of things you’ll get for free in extensions …

• Local storage (key value pairs)
• Storing preferences and settings
• Geolocation api (lets browser tell you where the device is running)
• WebGL (standard for doing 3D in the browser)
• Audio and video without plug-ins (natively for a couple of codecs)
• Notifications (e.g., desktop notifications coming out of the toolbar)
• Web Sockets (creates a persistent long live connection where the browser can keep connected to a server, to get IM, mail, etc quickly to the browser)
• Discover extensions here: chrome.google.com/extensions; extensions can be hosted there unless you code uses restricted api’s, in those cases, you need to sign something that indemnifies google, etc.
• Can also use flash, and run native code (from the old netscape days)
• NativeClient is another project, runs native code in the context of a sandbox, its coming soon
• Easy to install, click and installs immediately without restarting the browser
• Easy to update, every couple of hours, browsers go and check url, if updates exists, will get it and will update on the fly … all users would update within a day or so, no review process

How do I write an extension?

• Use technology you already know … just like writing a website
• Just focusing on chrome itself (not cross browser)
• Simple API’s: eg, bookmarks, history i18n, processes, tabs / windows, etc.
• Start with manifestation with a.json file
• Develop right in Google Chrome text editor
• chrome://extensions/ (from tools menu on mac)

• Not wild about toolbars in Chrome (design philosophy)
• Instead of toolbars, for extensions, we added “Browser Action” …
• Browser Action icon in upper right (a few things you can do with it)
• Its dynamic, can use JavaScript with it on the fly
• Can change it to another image within extension folder
• Or, in html, using the canvas element … demo of using canvas to spin the icon
• Can display new mail count, for example, like 4 characters worth
• Things you can do to get users attention and give them info to follow up on
• Page Actions – instead of being in the URL box, its next to it
• Browser actions are for any page … but Page Actions is for something contextual to the page in question … might only show up if it detects there is some flash on page (if the extension does things for flash)
• Pop up from URL box
• 3 main views: browser, page and pop ups
• One more view … is the webpage itself
• Grease Monkey built in … we call it “Content Script”
• A javaScript that gets injected and changes the html that you are viewing
• Lessons learned by Aaron when he did GreaseMonkey (now works for google)
• Isolated words … didn’t want your content script to be compromised by a bad website …. so the idea behind Isolated words … its JavaScript … can’t see global variables or functions within the page … it turns out that you can do a lot by just havig access to the DOM … you don’t have to interact with the script of the page … there is workarounds … something about working within the context of the page’s script ….. (Security feature)
• Limited access to chrome.*API
• Can talk to other extensions, to act on your behave …
• Introducing the background page …
• Runs behind the browser, doesn’t show, has a dom and a content script, etc.
• A place to run persistent script … this is the place you’d do the xhr’s to pull new mail, registering new listener programs, etc…
• API’s for content scripts to communicate with your background scripts …
• The brains of your extensions
• The popup is a page as well. It and the script talks t the background page … the logic lives in the background page
• Background and popups is your code and you have full access to it
• The content script has limited access to chrome api’s
• Message passing
• code.google.com/chrome/extensions/ for documentation on this stuff …

A simple twitter trend fetcher

• Changes page, adds a div, inserts trends on twitter
• Adds blue div on top of page, showing twitter trending topics, added by extensions
• Need to choose url’s that it will be inserted into

….

• Uses HTML5 for things…
• Option pages
• Override pages … can over ride tabs, or book marker functionality, or, etc. You can override those things ….
• Themes …
• Can manipulate windows api … (create them, move them around, close them, etc…)
• Asynchronous … don’t want to lock up the whole browser …
• Bookmarks sampe code … tree like api … takes bookmarks and puts into a page
• Take screenshots api … takes one and displays it in the page ….
• A few more experimental ones … use custom codes .. processes, infobar, cookies, context menus, clipboard … looking for feedback … TRY OUT THESE THINSS and give feedback

Q: How use GeoLocation?

A: Right now you have to specify them in in your geo array.

Q: From the snapshot api, can you create a thumbnail?

A: You get a URL with the image, and then you can load it into canvas to do what you need to create it as a thumbnail.