Chrome extension development

1,203 views
1,110 views

Published on

Chrome extnsion developments

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,203
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Chrome extension development

  1. 1. Chrome extensions development Michal Haták twista.cz @twistacz
  2. 2. http://sli.do/ctvrtkon
  3. 3. What are extensions? ● Applications running inside Chrome browser ● Provide additional functionality or customize browser experience ● Written using HTML, Javascript and CSS ● Integrated using simple chrome.* API
  4. 4. What are extensions? ● Installed instantly ● Updated automatically ● Run in separate processes
  5. 5. Why Chrome instead of ….
  6. 6. Chrome is most used browser since May 2012 http://gs.statcounter.com/#browser-ww-monthly-201201-201401
  7. 7. Motivation ● ● ● Small learning curve Easy to distribute via chrome.google.com/webstore Permanent presence in browser
  8. 8. Structure of extension ● Compressed file (.crx) composed of: – Manifest file – Optional HTML/CSS files – Optional Javascript files – Statics (images etc.)
  9. 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. 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. 11. Browser components ● Browser action (popup) ● Page action ● Content scripts ● Background page ● Omnibox
  12. 12. Browser action - popup ● Icon in chrome bar ● Can contain HTML content (onclick) ● Chrome badge
  13. 13. Page action ● Icon in Omnibox ● Can contain HTML/JS content ● Just on specific pages
  14. 14. Omnibox
  15. 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. 16. +------------------------------------| background page |------------------------------------| | +--------------------------------+ | web page | |--------------------------------| | | | | | | | | | | | | | | | | ^ | | | | | | | |--------------------------|----| ^ | | | | | +------------ ------+ +-------------------|------------+ | | | content script
  17. 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. 18. Ok, what's next? ● chrome.* APIs ● Permissions ● Distribution
  19. 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. 20. chrome.* APIs ● Less common APIs – chrome.i18n.* - translations – chrome.power.* - system's power management – chrome.events.* – chrome.downloads.* – chrome.devtools.* – chrome.commands.* – chrome.alarms.* - schedule code to run developer.chrome.com/extensions/api_index.html
  21. 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. 22. Permissions examples ● tabs ● bookmarks ● http://*.google.com/ ● http://*/* ● <all_urls>
  23. 23. Distribution - Chrome Web Store ● Apps, Themes, Extensions ● $5 signup fee – forever ● Chrome Web Store Payments
  24. 24. Let's start – demo time ● Twista/chrome-skeleton ● Simple skeleton for easy development git clone http://git.twista.cz/chromeskeleton
  25. 25. Questions?

×