Your SlideShare is downloading. ×
0
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Chrome Extension Develop Starts
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Chrome Extension Develop Starts

5,038

Published on

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,038
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
164
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 1. Use Browser Action as a useful function 2. Use a beautiful and alpha icon 3. DONT use animation
  • Transcript

    • 1. Chrome Extension Development Starts <ul><li>Xu Jiwei </li></ul><ul><li>ohdarling88 at gmail d0t com </li></ul><ul><li>2010.01.17 </li></ul>
    • 2. Who is this guy <ul><li>Xu Jiwei </li></ul><ul><li>ohdarling88 at gmail d0t com </li></ul><ul><li>http://www.xujiwei.com </li></ul><ul><li>F2E of Taobao UED </li></ul><ul><li>Author of Chrome WangWang Extension </li></ul>
    • 3. TOC <ul><li>Introduction </li></ul><ul><li>User Interface </li></ul><ul><li>Structure </li></ul><ul><li>Programming </li></ul><ul><li>Resources </li></ul>
    • 4. What’s Chrome? Are you kidding?!
    • 5. Chrome <ul><li>Fast start-up </li></ul><ul><li>Google Chrome launches in a snap. </li></ul><ul><li>Fast loading </li></ul><ul><li>Google Chrome loads web pages quickly. </li></ul><ul><li>Fast search </li></ul><ul><li>Search the web right from the address bar. </li></ul><ul><li>more: </li></ul><ul><li>http://www.google.com/chrome/intl/en/features_mac.html </li></ul>
    • 6. Then, What is the Chrome Extension? <ul><li>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. </li></ul><ul><li>Also you can use NPAPI plugin written by C++ or other language in your extension. </li></ul>
    • 7. What can extension do? <ul><li>A client of some services </li></ul><ul><ul><li>Gmail Checker, Metrist </li></ul></ul><ul><li>A assistant utility </li></ul><ul><ul><li>Proxy Switchy, AutoExpander </li></ul></ul><ul><li>An enhancement feature </li></ul><ul><ul><li>History2 </li></ul></ul>
    • 8. How user to use?
    • 9. User Interface <ul><li>Browser Action or it’s popup </li></ul><ul><li>Page Action or it’s popup </li></ul><ul><li>Extension’s pages </li></ul>
    • 10. Browser Action
    • 11. Browser Action <ul><li>Shown in Chrome’s main toolbar </li></ul><ul><li>Could show a Badge for notification </li></ul><ul><li>Could show a popup for more detail view </li></ul><ul><li>At most ONE browser action allowed </li></ul><ul><li>Some tips </li></ul>
    • 12. Page Action
    • 13. Page Action <ul><li>Display on the right of address bar </li></ul><ul><li>By default the icon is hidden </li></ul><ul><li>Only show under specified conditions </li></ul><ul><li>At most ONE page action too </li></ul>
    • 14. Extension’s Page
    • 15. Extension’s Page <ul><li>You can browse a page of your extension with the protocol “chrome-extension://” </li></ul><ul><li>chrome-extension://{extension-id}/path/to/page.html </li></ul><ul><li>But the url is not shown in the address bar </li></ul>
    • 16. Override Page? <ul><li>A extension’s page with SPECIAL chrome url, eg: chrome://newtab/ </li></ul><ul><li>Currently only “new tab” page can be override </li></ul><ul><li>DO NOT make a page similar to the default “new tab” page </li></ul><ul><li>Except more useful or faster than the default “new tab” page </li></ul><ul><li>Otherwise DON’T override the new tab page </li></ul>
    • 17. Options Page? <ul><li>It’s just a normal extension page too </li></ul><ul><li>But the page can be directly opened by clicking “Options” button in Extensions Management Page </li></ul><ul><li>For saving settings of your extension only </li></ul><ul><li>NO differences to a normal extension page </li></ul>
    • 18. and, Popup Page? <ul><li>It is also a normal extension page. </li></ul>
    • 19. Background tasks <ul><li>Or your extension doesn’t need interact with user, just do some background tasks </li></ul><ul><li>Like Chrome WangWang Protocol Handler </li></ul>
    • 20. How to build?
    • 21. Directory Structure <ul><li>extension </li></ul><ul><ul><li>manifest.json </li></ul></ul><ul><ul><li>background.htm, content_script.js </li></ul></ul><ul><ul><li>_locales/ </li></ul></ul><ul><ul><ul><li>zh_CN/ </li></ul></ul></ul><ul><ul><ul><ul><li>messages.json </li></ul></ul></ul></ul><ul><ul><ul><li>en_US/ </li></ul></ul></ul>
    • 22. manifest.json <ul><li>Core configuration file </li></ul><ul><li>Extension name, description, logo, update url and etc. </li></ul><ul><li>Specify the background page, content scripts, option page, actions. </li></ul><ul><li>Permissions </li></ul>
    • 23. Background Page <ul><li>Every extension has at most ONE background page </li></ul><ul><li>Background page is always running while Chrome is running </li></ul><ul><li>For background tasks </li></ul>
    • 24. Content Scripts <ul><li>Toggle page action and browser action’s visibility </li></ul><ul><li>Access the web page’s DOM </li></ul>
    • 25. How to program?
    • 26. APIs
    • 27. Chrome Extension’s API <ul><li>chrome.extension.* </li></ul><ul><li>chrome.pageAction.* </li></ul><ul><li>chrome.browserAction.* </li></ul><ul><li>chrome.tabs.* </li></ul><ul><li>chrome.windows.* </li></ul><ul><li>chrome.bookmarks.* </li></ul><ul><li>etc ... </li></ul>
    • 28. Asynchronous API <ul><li>Always use callback to get api’s return value </li></ul><ul><li>chrome.bookmarks.getTree(function(treeNodes) { </li></ul><ul><li>// processing bookmarks’ tree </li></ul><ul><li>} </li></ul>
    • 29. Event driven <ul><li>Just like DOM Events </li></ul><ul><li>chrome.pageAction.onClicked.addListener(function() { </li></ul><ul><li>// do something </li></ul><ul><li>}) </li></ul><ul><li>chrome.tabs.onUpdated.addListener(function() { </li></ul><ul><li>// do something </li></ul><ul><li>}) </li></ul>
    • 30. Most of the apis are ASYNCHRONOUS ASYNCHRONOUS
    • 31. Security and Sandbox <ul><li>Cross domain XHR is allowed </li></ul><ul><li>“ Permission ” property in manifest.json </li></ul><ul><li>JavaScript of Extension and web pages are running in two separated environments </li></ul>
    • 32. Message Passing <ul><li>Communications in content scripts and background page, or other extension’s page </li></ul><ul><li>Because API limits in content scripts </li></ul><ul><li>Encoding </li></ul>
    • 33. Message Passing Chrome Extension Background Page Content Scripts Page Action Browser Action Popup page, Options page, etc.
    • 34. Extension’s Resource <ul><li>All files of your extension is accessible </li></ul><ul><li>Just use the protocol “chrome-extension://” </li></ul><ul><li>Use XHR in web pages to get extension’s file </li></ul>
    • 35. i18n <ul><li>chrome.i18n.* </li></ul><ul><li>Localized strings stored in _locales/{lang}/messages.json </li></ul><ul><li>chrome.i18n.getMessage </li></ul>getMessage message name data Lookup localized string and format with data Localized string
    • 36. How to publish?
    • 37. Package <ul><li>If you publish the extension on Google Official Chrome Extensions site, this step should be SKIPPED </li></ul><ul><li>Before publishing your extension, you must package it as a “crx” file </li></ul><ul><li>Without any other tools, Chrome is enough </li></ul><ul><li>Protect your private key file, it’s very IMPORTANT </li></ul>
    • 38. Auto Updating <ul><li>Tell Chrome to update your extension from somewhere </li></ul><ul><li>Be careful about “version” in manifest.json </li></ul><ul><li>Set “update_url” in manifest.json </li></ul><ul><li>It is NOT required if you want to publish it on Google Official Extensions site </li></ul>
    • 39. Publish <ul><li>Official Chrome Extensions Site https://chrome.google.com/extensions/developer/dashboard Note: Upload the source of you extension... </li></ul><ul><li>Chrome Extensions http://www.chromeextensions.org/ </li></ul>
    • 40. Resources <ul><li>Chrome Extension’s Documentation </li></ul><ul><li>Google Chrome Extensions Site </li></ul><ul><li>Chrome Extensions </li></ul><ul><li>Source code </li></ul>
    • 41. Thanks

    ×