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.
{ 0 comments }









Now its available to all these Java developers …


(Note: SweatInvestors are welcomed to make posts from interesting events, especially if the events are “invite only”. Both to share their access as well as to share their unique perspective on the event.)
Had to develop dozens of real time technologies to make search real time…
My Wrap-Up Comments