Chrome Extension Development

StartsXu Jiwei

ohdarling88 at gmail d0t com2010.01.17

Who is this guy

•Xu Jiwei

•ohdarling88 at gmail d0t com

•http://www.xujiwei.com

•F2E of Taobao UED

•Author of Chrome WangWang Extension

TOC

•Introduction

•User Interface

•Structure

•Programming

•Resources

What’s Chrome?

Are you kidding?!

ChromeFast start-upGoogle Chrome launches in a snap.Fast loadingGoogle Chrome loads web pages quickly.Fast searchSearch the web right from the address bar.

more: http://www.google.com/chrome/intl/en/features_mac.html

Then, What is the Chrome Extension?•Extensions are small software

programs that can modify and enhance the functionality of Google Chrome. You write them using web technologies such as HTML, JavaScript, and CSS.

•Also you can use NPAPI plugin written by C++ or other language in your extension.

What can extension do?

•A client of some services

•Gmail Checker, Metrist

•A assistant utility

•Proxy Switchy, AutoExpander

•An enhancement feature

•History2

How user to use?

User Interface

•Browser Action or it’s popup

•Page Action or it’s popup

•Extension’s pages

Browser Action

Browser Action

•Shown in Chrome’s main toolbar

•Could show a Badge for notification

•Could show a popup for more detail view

•At most ONE browser action allowed

•Some tips

Page Action

Page Action

•Display on the right of address bar

•By default the icon is hidden

•Only show under specified conditions

•At most ONE page action too

Extension’s Page

Extension’s Page

•You can browse a page of your extension with the protocol “chrome-extension://”

•chrome-extension://{extension-id}/path/to/page.html

•But the url is not shown in the address bar

Override Page?•A extension’s page with SPECIAL chrome

url, eg: chrome://newtab/

•Currently only “new tab” page can be override

•DO NOT make a page similar to the default “new tab” page

• Except more useful or faster than the default “new tab” page

•Otherwise DON’T override the new tab page

Options Page?• It’s just a normal extension page too

•But the page can be directly opened by clicking “Options” button in Extensions Management Page

•For saving settings of your extension only

•NO differences to a normal extension page

and, Popup Page?• It is also a normal extension page.

Background tasks

•Or your extension doesn’t need interact with user, just do some background tasks

•Like Chrome WangWang Protocol Handler

How to build?

Directory Structure• extension

•manifest.json

• background.htm, content_script.js

• _locales/

• zh_CN/

•messages.json

• en_US/

manifest.json

•Core configuration file

•Extension name, description, logo, update url and etc.

•Specify the background page, content scripts, option page, actions.

•Permissions

Background Page

•Every extension has at most ONE background page

•Background page is always running while Chrome is running

•For background tasks

Content Scripts

•Toggle page action and browser action’s visibility

•Access the web page’s DOM

How to program?

APIs

Chrome Extension’s API

• chrome.extension.*

• chrome.pageAction.*

• chrome.browserAction.*

• chrome.tabs.*

• chrome.windows.*

• chrome.bookmarks.*

• etc ...

Asynchronous API

•Always use callback to get api’s return value

• chrome.bookmarks.getTree(function(treeNodes) {

• // processing bookmarks’ tree• }

Event driven

•Just like DOM Events

• chrome.pageAction.onClicked.addListener(function() {

• // do something• })• chrome.tabs.onUpdated.addListener(functio

n() {• // do something• })

Most of the apis areASYNCHRONOUS

Security and Sandbox

•Cross domain XHR is allowed

•“Permission” property in manifest.json

•JavaScript of Extension and web pages are running in two separated environments

Message Passing

•Communications in content scripts and background page, or other extension’s page

•Because API limits in content scripts

•Encoding

Chrome ExtensionChrome ExtensionChrome ExtensionChrome Extension

Background PageBackground PageBackground PageBackground Page

Content ScriptsContent ScriptsContent ScriptsContent Scripts

Page ActionPage ActionPage ActionPage Action Browser Browser ActionAction

Browser Browser ActionAction

Message Passing

Popup page,Popup page,Options page,Options page,

etc.etc.

Popup page,Popup page,Options page,Options page,

etc.etc.

Extension’s Resource

•All files of your extension is accessible

•Just use the protocol “chrome-extension://”

•Use XHR in web pages to get extension’s file

i18n•chrome.i18n.*

•Localized strings stored in _locales/{lang}/messages.json

•chrome.i18n.getMessage

getMessagetMessagege

getMessagetMessagege

message message namename

message message namename

datadatadatadata

Lookup Lookup localized localized

string and string and format with format with

datadata

Lookup Lookup localized localized

string and string and format with format with

datadata

Localized Localized stringstring

Localized Localized stringstring

How to publish?

Package• If you publish the extension on Google

Official Chrome Extensions site, this step should be SKIPPED

•Before publishing your extension, you must package it as a “crx” file

•Without any other tools, Chrome is enough

•Protect your private key file, it’s very IMPORTANT

Auto Updating

•Tell Chrome to update your extension from somewhere

•Be careful about “version” in manifest.json

•Set “update_url” in manifest.json

•It is NOT required if you want to publish it on Google Official Extensions site

Publish

•Official Chrome Extensions Sitehttps://chrome.google.com/extensions/developer/dashboardNote: Upload the source of you extension...

•Chrome Extensionshttp://www.chromeextensions.org/

Resources

•Chrome Extension’s Documentation

•Google Chrome Extensions Site

•Chrome Extensions

•Source code

Thanks