This document provides an overview of developing Chrome extensions, including the user interface, programming, publishing process, and resources. It discusses the different types of extension pages like browser actions, page actions, options pages, and popup pages. It also covers the directory structure, manifest file, background pages, content scripts, asynchronous APIs, permissions, and internationalization.

1. Chrome Extension Development Starts Xu Jiwei ohdarling88 at gmail d0t com 2010.01.17

2. Who is this guy Xu Jiwei ohdarling88 at gmail d0t com http://www.xujiwei.com F2E of Taobao UED Author of Chrome WangWang Extension

3. TOC Introduction User Interface Structure Programming Resources

4. What’s Chrome? Are you kidding?!

5. Chrome Fast start-up Google Chrome launches in a snap. Fast loading Google Chrome loads web pages quickly. Fast search Search the web right from the address bar. more: http://www.google.com/chrome/intl/en/features_mac.html

6. 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.

7. What can extension do? A client of some services Gmail Checker, Metrist A assistant utility Proxy Switchy, AutoExpander An enhancement feature History2

8. How user to use?

9. User Interface Browser Action or it’s popup Page Action or it’s popup Extension’s pages

10. Browser Action

11. 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

12. Page Action

13. 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

14. Extension’s Page

15. 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

16. 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

17. 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

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

19. Background tasks Or your extension doesn’t need interact with user, just do some background tasks Like Chrome WangWang Protocol Handler

20. How to build?

21. Directory Structure extension manifest.json background.htm, content_script.js _locales/ zh_CN/ messages.json en_US/

22. manifest.json Core configuration file Extension name, description, logo, update url and etc. Specify the background page, content scripts, option page, actions. Permissions

23. Background Page Every extension has at most ONE background page Background page is always running while Chrome is running For background tasks

24. Content Scripts Toggle page action and browser action’s visibility Access the web page’s DOM

25. How to program?

26. APIs

27. Chrome Extension’s API chrome.extension.* chrome.pageAction.* chrome.browserAction.* chrome.tabs.* chrome.windows.* chrome.bookmarks.* etc ...

28. Asynchronous API Always use callback to get api’s return value chrome.bookmarks.getTree(function(treeNodes) { // processing bookmarks’ tree }

29. Event driven Just like DOM Events chrome.pageAction.onClicked.addListener(function() { // do something }) chrome.tabs.onUpdated.addListener(function() { // do something })

30. Most of the apis are ASYNCHRONOUS ASYNCHRONOUS

31. 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

32. Message Passing Communications in content scripts and background page, or other extension’s page Because API limits in content scripts Encoding

33. Message Passing Chrome Extension Background Page Content Scripts Page Action Browser Action Popup page, Options page, etc.

34. 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

35. i18n chrome.i18n.* Localized strings stored in _locales/{lang}/messages.json chrome.i18n.getMessage getMessage message name data Lookup localized string and format with data Localized string

36. How to publish?

37. 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

38. 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

39. Publish Official Chrome Extensions Site https://chrome.google.com/extensions/developer/dashboard Note: Upload the source of you extension... Chrome Extensions http://www.chromeextensions.org/

40. Resources Chrome Extension’s Documentation Google Chrome Extensions Site Chrome Extensions Source code

41. Thanks