Chrome Extension Develop Starts
Transcript of Chrome Extension Develop Starts
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