1. Chrome extensions development Michal Hatk twista.cz @twistacz

2. http://sli.do/ctvrtkon 3. What are extensions? Applications running inside Chrome browserProvide additional functionality or customize browser experienceWritten using HTML, Javascript and CSSIntegrated using simple chrome.* API 4. What are extensions? Installed instantlyUpdated automaticallyRun in separate processes 5. Why Chrome instead of . 6. Chrome is most used browser since May 2012 http://gs.statcounter.com/#browser-ww-monthly-201201-201401 7. Motivation Small learning curve Easy to distribute via chrome.google.com/webstore Permanent presence in browser 8. Structure of extension Compressed file (.crx) composed of: Manifest fileOptional HTML/CSS filesOptional Javascript filesStatics (images etc.) 9. Manifest Every extension, installable web app, and theme has a JSON-formatted manifest file, named manifest.json, that provides important information.developer.chrome.com/extensions/manifest.html 10. manifest.json { "name": "Read it later!", "version": "0.9.0", "manifest_version": 2, "description": "Enables save websites for later, no ads, no logins", "browser_action": { "default_icon": "img/icon48.png", "default_popup": "popup.html" }, "default_locale": "en", "icons": { "128": "img/icon128.png" }, "offline_enabled": true, "permissions": [ "contextMenus", "storage", "tabs" ], "background": { "scripts": [ "background.js" ] } 11. Browser components Browser action (popup)Page actionContent scriptsBackground pageOmnibox 12. Browser action - popup Icon in chrome barCan contain HTML content (onclick)Chrome badge 13. Page action Icon in OmniboxCan contain HTML/JS contentJust on specific pages 14. Omnibox 15. Content script Javascript which runs on page specified in manifest (can be regexp) Content script has access to the DOM of HTML page, but runs on its isolated container Can pass messages with the background page 16. +------------------------------------| background page |------------------------------------| | +--------------------------------+ | web page | |--------------------------------| | | | | | | | | | | | | | | | | ^ | | | | | | | |--------------------------|----| ^ | | | | | +------------------+ +-------------------|------------+ || | content script 17. Background page background page is an HTML page that runs in the extension process It exists for the lifetime of your extension, and only one instance of it at a time is active* *Exception if extension uses incognito split mode 18. Ok, what's next? chrome.* APIsPermissionsDistribution 19. chrome.* APIs chrome is the top-level object and exposes many interesting APIs common: chrome.browserAction.*chrome.contextMenus.*chrome.debugger.*chrome.notifications.*chrome.omnibox.*chrome.storage.*chrome.tabs.*- local/sync 20. chrome.* APIs Less common APIs chrome.i18n.*- translationschrome.power.* - system's power managementchrome.events.*chrome.downloads.*chrome.devtools.*chrome.commands.*chrome.alarms.*- schedule code to rundeveloper.chrome.com/extensions/api_index.html 21. Permissions Extension or app must declare its intent in the "permissions" field (manifest) Each permission can be either one of a list of known strings (such as "downloads") or a match pattern 22. Permissions examples tabsbookmarkshttp://*.google.com/http://*/* 23. Distribution - Chrome Web Store Apps, Themes, Extensions$5 signup fee foreverChrome Web Store Payments 24. Let's start demo time Twista/chrome-skeletonSimple skeleton for easy developmentgit clone http://git.twista.cz/chromeskeleton 25. Questions?