Chrome Apps & Extensions

760 views
555 views

Published on

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

No Downloads
Views
Total views
760
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Chrome Apps & Extensions

  1. 1. Chrome Apps & Extension
  2. 2. About Me Varun Raj Web Developer | Internet Addict | Android Fan Boy | Techie | Engineering Student
  3. 3. Chrome Extensions and Apps Looking beyond browsing on Chrome
  4. 4. What is an Extension? • • • • A compressed package Extends the functionality of the browser Minimal or No UI Usually enhances functionality of websites or web apps
  5. 5. What is an App? • • • • Runs inside your browser Has a Dedicated User Interface Rich User Interaction Ex. Games and Photo Editors
  6. 6. What an Extension contains? • • • • • manifest.json browser action or page action content script - CSS/JS background pages Other media files
  7. 7. Extension UIs Browser Action Page Action
  8. 8. Layout of an Extension chrome - top-level object & is exposed to extensions • • • • • • • chrome.extension.* chrome.browserAction.* chrome.pageAction.* chrome.windows.* chrome.tabs.* chrome.bookmarks.* Does not access much of the native code
  9. 9. Manifest.json For details, see Manifest Files. { JSON "manifest_version": 2, "name": “HUG Chennai", "description": "This is a sample app", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "https://secure.flickr.com/" ] }
  10. 10. Architecture • • The background page UI pages
  11. 11. Background Pages • • Persistent Background Pages Event Pages
  12. 12. UI Pages • • • Written in HTML Provides the UI for an Extension Ex. popup.html
  13. 13. Content Script • • • Part of the loaded page Injects contents into the page using scripts Exchange messages to parent script
  14. 14. Where are extensions stored? http://dev.chromium.org/user-experience/user-data-directory Windows : %userprofile%Local SettingsApplication DataGoogleChromeUser DataDefaultExtensions or C:Documents and SettingsAdminLocal SettingsApplication DataGoogleChromeUser DataDefaultExtensions Linux : ~/.config/google-chrome/Default/Extensions/ Mac OSX : ~/Library/Application Support/Google/Chrome/Default File:///
  15. 15. Demo Time !
  16. 16. Nothing works! • Refused to load script from 'http://code.jquery.com/jquery-latest.js' because of Content-Security-Policy. • Refused to execute inline script because of Content-Security-Policy. • Refused to execute inline event handler because of Content-Security-Policy. Need to: • Load external scripts over HTTPS • Extract own scripts to .js files • Remove inline event handlers
  17. 17. CSP-ready extension <!DOCTYPE html> <html> <head><title>ManifestLint</title> <script src="https://ajax.googleapis.com/.../jquery.min.js" type="text/javascript"></script> <script src="main.js" type="text/javascript"></script> </head> <body> ... HTML
  18. 18. Chrome Apps
  19. 19. The App Architecture
  20. 20. Links • Manifest versions: o http://code.google.com/chrome/extensions/manifestVersion.html • Content Security Policy: o http://code.google.com/chrome/extensions/contentSecurityPolicy.html • HTML5 sandbox attribute for iframes: o http://www.whatwg.org/specs/web-apps/current-work/multipage/the- iframe-element.html#attr-iframe-sandbox
  21. 21. Creating an App 1. Create manifest.json 2. Create the background script 3. Create the window page 4. Create the icons 5. Enable Chrome Flags: chrome://flags - Experimental Extension APIs 6. Load the app as Unpacked Extension
  22. 22. Making money out of Chrome Apps ● In-App Purchases ● Google Wallet
  23. 23. Thank You ! Contact Me mailme@varunraj.in

×