Your SlideShare is downloading. ×

Chrome Apps & Extensions

313

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
313
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Chrome Apps & Extension
  • 2. About Me Varun Raj Web Developer | Internet Addict | Android Fan Boy | Techie | Engineering Student
  • 3. Chrome Extensions and Apps Looking beyond browsing on Chrome
  • 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. What is an App? • • • • Runs inside your browser Has a Dedicated User Interface Rich User Interaction Ex. Games and Photo Editors
  • 6. What an Extension contains? • • • • • manifest.json browser action or page action content script - CSS/JS background pages Other media files
  • 7. Extension UIs Browser Action Page Action
  • 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. 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. Architecture • • The background page UI pages
  • 11. Background Pages • • Persistent Background Pages Event Pages
  • 12. UI Pages • • • Written in HTML Provides the UI for an Extension Ex. popup.html
  • 13. Content Script • • • Part of the loaded page Injects contents into the page using scripts Exchange messages to parent script
  • 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. Demo Time !
  • 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. 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. Chrome Apps
  • 19. The App Architecture
  • 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. 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. Making money out of Chrome Apps ● In-App Purchases ● Google Wallet
  • 23. Thank You ! Contact Me mailme@varunraj.in

×