Chrome Extension Develop Starts

5,552 views

Published on

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

No Downloads
Views
Total views
5,552
On SlideShare
0
From Embeds
0
Number of Embeds
130
Actions
Shares
0
Downloads
175
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide
  • 1. Use Browser Action as a useful function 2. Use a beautiful and alpha icon 3. DONT use animation
  • Chrome Extension Develop Starts

    1. 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. 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. 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. 4. What’s Chrome? Are you kidding?!
    5. 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. 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. 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. 8. How user to use?
    9. 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. 10. Browser Action
    11. 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. 12. Page Action
    13. 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. 14. Extension’s Page
    15. 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. 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. 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. 18. and, Popup Page? <ul><li>It is also a normal extension page. </li></ul>
    19. 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. 20. How to build?
    21. 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. 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. 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. 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. 25. How to program?
    26. 26. APIs
    27. 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. 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. 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. 30. Most of the apis are ASYNCHRONOUS ASYNCHRONOUS
    31. 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. 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. 33. Message Passing Chrome Extension Background Page Content Scripts Page Action Browser Action Popup page, Options page, etc.
    34. 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. 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. 36. How to publish?
    37. 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. 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. 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. 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. 41. Thanks

    ×