Google chrome extension


Published on

Published in: Education, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Google chrome extension

  1. 1. Bed Boys GangMr. Thapakit Student ID: 54701760SarakhamMr. Nattaphat Student ID: 54701995KhamnonMr. Vikornsak Student ID: 54703727RakhnooMr. Wissarut Student ID: 54703762KatathikarnMr. Somjean Student ID: 54704041SangdaoMr. Surasak Student ID: 54704304Phetmanee
  2. 2. How do we start ? Follow the Getting Started Tutorial Read the Overview Keep up-to-date by reading the Chromium blog Subscribe to the chromium-extensions group
  3. 3. Overview
  4. 4. What are Extensions ?• Small software programs• Modify and enhance functionality of Chrome browser• Implement using Web Technologies• Also use to build packaged apps• Have little to no user interface• Don’t need to depend on content from the web
  5. 5. The Basics
  6. 6. Extensions UIs
  7. 7. Packaged app UIs
  8. 8. Architecture
  9. 9. Background Page
  10. 10. UI Pages
  11. 11. Content Scripts
  12. 12. Files
  13. 13. Files• A manifest file (JSON)• One or more HTML files (unless the extension is a theme)• Optional : One or more JavaScript files• Optional : Any other files your extension needs for example, image files
  14. 14. The Manifest File(manifest.json) manifest.json
  15. 15. Using theChrome.*APIs
  16. 16. Asynchronous vs.• Synchronous APIs Most methods in the chrome.* are asynchronous• they return immediately, without waiting for the operation to finish.• If you need to know the outcome of that operation, then you pass a callback function into the method.• That callback is executed later (potentially much later), sometime after chrome.tabs.create(object createProperties, the method returns. Heres an example of function callback) the signature for an asynchronous method:
  17. 17. Asynchronous vs.• Synchronousare synchronous. Other chrome.* methods• Synchronous methods never have a callback because they dont return until theyve completed all their work.• Often, synchronous methods have a return type. Consider the• DOMWindow chrome.extension.getBackgroundPage() chrome.extensions.getBackgroundPage() method:
  18. 18. Example: Using acallback
  19. 19. Communicationbetweenpages
  20. 20. Communication• betweenwithin an extension often The HTML pages Pages need to communicate.• Because all of an extensions pages execute in same process on the same thread, the pages can make direct function calls to each other.• The HTML pages within an extension often need to communicate.• Because all of an extensions pages execute in same process on the same thread, the pages can make direct function calls to each
  21. 21. Saving dataandIncognitomode
  22. 22. Saving data &• Incognito data using the HTML5 Extensions can save mode web storage API (such as localStorage)• Or by making server requests that result in saving data.• Whenever you want to save something, first consider whether its from a window thats in incognito mode.• By default, extensions dont run in incognito windows, and packaged apps do.• You need to consider what a user expects
  23. 23. Saving data &• Incognito modethe window Incognito mode promises that will leave no tracks.• When dealing with data from incognito windows, do your best to honor this promise.• For example, if your extension normally saves browsing history to the cloud, dont save history from incognito windows.• On the other hand, you can store your extensions settings
  24. 24. Saving data & Incognito modeIf a piece of data might showwhere a userhas been on the web or whatthe user has done,dont store it if its from anincognito window.
  25. 25. Saving data &Incognito mode
  26. 26. Introducingto JSON
  27. 27. JSON• JavaScript Object Notation• easy for humans to read and write• easy for machines to parse and generate• based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999• text format that is completely language independent• uses conventions that are familiar to programmers of the C-family of languages
  28. 28. JSON – built 2 structuresA collection of name/value pairs. In variouslanguages, this is realized asan object, record, struct, dictionary, hash table,keyed list, or associative array.An ordered list of values. In most languages,this is realizedas an array, vector, list, or sequence.
  29. 29. Object
  30. 30. Array
  31. 31. Value
  32. 32. String
  33. 33. Number
  34. 34. JSON Example manifest.json
  35. 35. GoogleChromeExtensionsFeatures
  36. 36. Browser UIChanging the Google Chrome chromeBrowser Actions Add icons to the toolbar (extensions only)Desktop Notify users of important eventsNotificationsOmnibox Add a keyword to the address barOption Pages Let users customize your extensionOverride Pages Implement your own version of standard browser pages such as the New Tab pagePage Actions Add temporary icons inside the address bar (extensions only)
  37. 37. Browser InteractionInteracting with Google in otherwaysBookmarks Create, organize, and otherwise manipulate the users bookmarksCookies Explore and modify the browsers cookie systemEvents Detect when something interesting happensHistory Interact with the browsers record of visited pagesTabs Create, modify, and rearrange tabs in the browserWindows Create, modify, and rearrange windows in the browser
  38. 38. ImplementationImplementing the innards of yourextensionAccessibility Make your extension accessible to(a11y) people with disabilitiesBackground Put all the common code for yourPages extension in a single placeContent-Scripts Run JavaScript code in the context of web pagesCross-Origin XHR Use XMLHttpRequest to send and receive data from remote servers
  39. 39. Implementation (cont.)Implementing the innards of yourextensionInternationalizati Deal with language and localeonMessage Passing Communicate from a content script to its parent extension, or vice versaOptional Modify your extensions permissionsPermissionsNPAPI Plugins Load native binary code
  40. 40. FinishingFinishing and distributing yourextensionAutoupdating Update extensions automaticallyHosting Host extensions on Google servers or your ownOther Distribute extensions on your networkDeployment or with other softwareOptionsPaging Create a .crx file so you can distribute your extension
  41. 41. Development
  42. 42. Create and Load an extension1. Create a folder somewhere on your computer to contain your extensions code.2. Inside your extensions folder, create a text file called manifest.json, and put this in it
  43. 43. Create and Load an extension3. Copy this icon to the same folder:  Load the extension:  Bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions.  If Developer mode has a + by it, click the + to add developer information to the page. The + changes to a -, and more buttons and information appear.  Click the Load unpacked extension button. A file dialog appears.
  44. 44. Create and Load an extensionIf your extension is valid, its icon appears next tothe address bar, and information about theextension appears in the extensions page, as thefollowing screenshot shows
  45. 45. Add code to the extension yvh8ri6o8cs61e
  46. 46. Add code to the extensionReturn to the extensionsmanagement page,and click the Reload button toload the newversion of the extension Click the extensions icon. A popup should appear that displays the contents of popup.html
  47. 47. Add code to theextension
  48. 48. Deployment
  49. 49. Extensions for ChromeContains extensions for Chrome, whichchange how the browser behaves and, in alimited way, how it looksIf your extension seems more like a websitethan a small browser add-on, consider making ita packaged app. Packaged apps areimplemented as extensions that have theadditional ability to present an app-like interface
  50. 50. Extensions for Chrome manifest, andEvery app has a most likelyicons, that you put intoa ZIP file and upload to the Chrome Developer Dashboard.The Chrome Web Store takes the contents ofthis ZIP file and puts them in a cryptographicallysigned .crx file. Users download this .crx andTo create installable web apps filewhen they click the youextensions, Install button for your app should befamiliar with HTML, JavaScript, and CSS. Ifyoure targeting Chrome exclusively, you candepend on HTML5 and the other emerging APIsthat Chrome supports
  51. 51. Extensions forChrome
  52. 52. Uploading and PublishingTo publish apps to the Chrome Web Store, youfirst use theChrome Developer Dashboard to upload yourapp and specifyhow its listing should look. Then you can publishit either to theworld at large or to a few trusted testers.
  53. 53. Uploading andPublishing
  54. 54. Uploading and Publishing9 STEPs : Publishing your app STEP Choose a developer account 1: STEP Create a ZIP file 2: STEP Upload the app 3: STEP Specify the payment system 4: STEP Get app constants 5:
  55. 55. Uploading and Publishing9 STEPs : Publishing your app (cont.) STEP Finish the app 6: STEP Provide store content 7: STEP Pay the developer signup fee 8: STEP Publish the app 9:
  56. 56. Benefits
  57. 57. SpeedChrome has taken it a step further.Chrome is the ultimate in fastbrowsing. With Internet connectionsgetting faster and faster, a browsershould be able to keep up with thepace of rendering images andcontent, which is what Google havemanaged to do perfectly.
  58. 58. SimplicityChrome on the other hand hasarranged everything in an organizedmanner, meaning the focus remainsentirely on what it should be –browsing the Internet.
  59. 59. ExtensionsThe extension support in Chrome hasbeen done fantastically. The ease ofinstalling new plugins means norestart is needed, and the browserspeed doesn’t suffer when lots ofextensions are installed. Thefunctional support for add-ons meansfull support for Grease Monkeyscripts too, which is a great addedbonus.