chrome extension develop starts
TRANSCRIPT
![Page 1: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/1.jpg)
Chrome Extension Development
StartsXu Jiwei
ohdarling88 at gmail d0t com2010.01.17
![Page 2: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/2.jpg)
Who is this guy
•Xu Jiwei
•ohdarling88 at gmail d0t com
•http://www.xujiwei.com
•F2E of Taobao UED
•Author of Chrome WangWang Extension
![Page 3: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/3.jpg)
TOC
•Introduction
•User Interface
•Structure
•Programming
•Resources
![Page 4: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/4.jpg)
What’s Chrome?
Are you kidding?!
![Page 5: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/5.jpg)
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
![Page 6: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/6.jpg)
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.
![Page 7: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/7.jpg)
What can extension do?
•A client of some services
•Gmail Checker, Metrist
•A assistant utility
•Proxy Switchy, AutoExpander
•An enhancement feature
•History2
![Page 8: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/8.jpg)
How user to use?
![Page 9: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/9.jpg)
User Interface
•Browser Action or it’s popup
•Page Action or it’s popup
•Extension’s pages
![Page 10: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/10.jpg)
Browser Action
![Page 11: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/11.jpg)
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 12: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/12.jpg)
Page Action
![Page 13: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/13.jpg)
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
![Page 14: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/14.jpg)
Extension’s Page
![Page 15: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/15.jpg)
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
![Page 16: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/16.jpg)
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
![Page 17: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/17.jpg)
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
![Page 18: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/18.jpg)
and, Popup Page?• It is also a normal extension page.
![Page 19: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/19.jpg)
Background tasks
•Or your extension doesn’t need interact with user, just do some background tasks
•Like Chrome WangWang Protocol Handler
![Page 20: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/20.jpg)
How to build?
![Page 21: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/21.jpg)
Directory Structure• extension
•manifest.json
• background.htm, content_script.js
• _locales/
• zh_CN/
•messages.json
• en_US/
![Page 22: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/22.jpg)
manifest.json
•Core configuration file
•Extension name, description, logo, update url and etc.
•Specify the background page, content scripts, option page, actions.
•Permissions
![Page 23: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/23.jpg)
Background Page
•Every extension has at most ONE background page
•Background page is always running while Chrome is running
•For background tasks
![Page 24: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/24.jpg)
Content Scripts
•Toggle page action and browser action’s visibility
•Access the web page’s DOM
![Page 25: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/25.jpg)
How to program?
![Page 26: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/26.jpg)
APIs
![Page 27: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/27.jpg)
Chrome Extension’s API
• chrome.extension.*
• chrome.pageAction.*
• chrome.browserAction.*
• chrome.tabs.*
• chrome.windows.*
• chrome.bookmarks.*
• etc ...
![Page 28: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/28.jpg)
Asynchronous API
•Always use callback to get api’s return value
• chrome.bookmarks.getTree(function(treeNodes) {
• // processing bookmarks’ tree• }
![Page 29: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/29.jpg)
Event driven
•Just like DOM Events
• chrome.pageAction.onClicked.addListener(function() {
• // do something• })• chrome.tabs.onUpdated.addListener(functio
n() {• // do something• })
![Page 30: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/30.jpg)
Most of the apis areASYNCHRONOUS
![Page 31: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/31.jpg)
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
![Page 32: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/32.jpg)
Message Passing
•Communications in content scripts and background page, or other extension’s page
•Because API limits in content scripts
•Encoding
![Page 33: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/33.jpg)
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.
![Page 34: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/34.jpg)
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
![Page 35: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/35.jpg)
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
![Page 36: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/36.jpg)
How to publish?
![Page 37: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/37.jpg)
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
![Page 38: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/38.jpg)
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
![Page 39: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/39.jpg)
Publish
•Official Chrome Extensions Sitehttps://chrome.google.com/extensions/developer/dashboardNote: Upload the source of you extension...
•Chrome Extensionshttp://www.chromeextensions.org/
![Page 40: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/40.jpg)
Resources
•Chrome Extension’s Documentation
•Google Chrome Extensions Site
•Chrome Extensions
•Source code
![Page 41: Chrome Extension Develop Starts](https://reader033.vdocuments.net/reader033/viewer/2022042504/5552726bb4c905d41d8b562e/html5/thumbnails/41.jpg)
Thanks