1. Presented by…. Group 2 1

2. Programming language 2Introduction

3. Introduction What is Google Chrome? What is Google Chrome? 3 – Google Chrome is a freeware web browser Developed by Developed by – Google Inc. Operating System Operating System – Windows, Linux, Mac, Android Latest Version Latest Version – V. 19.0.1055.1 (Dev.)

4. Introduction What is Chrome Extension? What is Chrome Extension? 4 – Google Chrome Extensions are applications that run inside the Chrome browser and provide additional functionality, integration with third party websites or services, and customized browsing experiences. – http://code.google.com/chrome/extensions/index.html http://code.google.com/chrome/extensions/index.html

5. Programming language 5 Form of Chrome Extension

6. Extension UIs Browser Actions Browser Actions – Use browser actions to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can also have a tooltip, a badge, and a popup. 6

7. Extension UIs Page Actions Page Actions – Use page actions to put icons inside the address bar. 7

8. Packaged App UIs Packaged App UIs Packaged App UIs – A packaged app usually presents its main functionality using an HTML page that's bundled into the app. 8

9. Programming language 9 Install Chrome Extension

10. How install Chrome Extension How install Chrome Extension 10

11. Install Chrome Extension Chrome Extension Page Chrome Extension Page 11

12. Install Chrome Extension Chrome Extension Store Chrome Extension Store 12

13. Programming language 13 Build Chrome Extension

14. Programming language 14 Programming Language

15. Programming language Language & Technique: Language & Technique: – Java script: runs inside web page. runs inside web page. – XmlHttpRequest: talks to a server. talks to a server. – Cookies, Local Storage or HTML 5 Database: persist some data persist some data – HTML and Cascading Style Sheets (CSS) : displays a nicely design web page. displays a nicely design web page. 15

16. Programming language 16 Files in Chrome Extension

17. Files 17 manifest.json js Files Related Files Html Files

18. Files Files 18 Files En TH CH

19. Files Each extension has the following files: Each extension has the following files: – A manifest file – One or more HTML files – One or more JavaScript files (Optional) – Any other files extension needs (Optional) For example, image files, css files For example, image files, css files 19

20. Manifest file The manifest file, called manifest.json The manifest file, called manifest.json JSON-format (JavaScript Object Notation) JSON-format (JavaScript Object Notation) Giving information about the extension, such as the most important files and the capabilities that the extension might use. Giving information about the extension, such as the most important files and the capabilities that the extension might use. 20

21. Manifest file: Fields The following code shows the supported manifest fields The following code shows the supported manifest fields Manifest fields consist of 4 types which are Manifest fields consist of 4 types which are – 1. Required field – 2. Recommended Field – 3. Action Field – 4. Other Field 21

22. Manifest file: Fields 22

23. 23

24. 24

25. 25

26. Programming language 26 First Baby Extension

27. Programming language 27 Architecture

28. Architecture of Chrome Extension There are three type of architecture that run on Chrome extension which are There are three type of architecture that run on Chrome extension which are – UI pages – The background page – Content scripts 28

29. Architecture of Chrome Extension UI pages is ordinary HTML pages that display the extension's UI. UI pages is ordinary HTML pages that display the extension's UI. For example, a browser action can have a popup, which is implemented by an HTML file. For example, a browser action can have a popup, which is implemented by an HTML file. 29

30. Architecture of Chrome Extension The background page is an invisible page that holds the main logic of the extension The background page is an invisible page that holds the main logic of the extension It is written HTML, Javascript, CSS and the file structure. For example, tabs, browser, bookmarks, events, history, window, etc. It is written HTML, Javascript, CSS and the file structure. For example, tabs, browser, bookmarks, events, history, window, etc. 30

31. Architecture of Chrome Extension Content scripts are JavaScript files by using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them. Content scripts are JavaScript files by using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them. For example, finding unlinked URLs in web pages and convert them into hyperlinks For example, finding unlinked URLs in web pages and convert them into hyperlinks 31

32. Programming language 32 Using APIs

33. APIs in Chrome Extension There are two types of APIs that’s used in Chrome Extension There are two types of APIs that’s used in Chrome Extension – Chrome's APIs – Other APIs 33

34. APIs in Chrome Extension Chrome's APIs Chrome's APIs Google Chrome provides APIs such as chrome.bookmarks.* and chrome.tab.* so that extensions can interact with the browser. Google Chrome provides APIs such as chrome.bookmarks.* and chrome.tab.* so that extensions can interact with the browser. Two types of Chrome's APIs Two types of Chrome's APIs Supported APIs which now supported in Chrome APIs Supported APIs which now supported in Chrome APIs Experimental APIs which will become supported APIs in future releases of Chrome Experimental APIs which will become supported APIs in future releases of Chrome 34

35. APIs in Chrome Extension Other APIs such as Other APIs such as Standard JavaScript APIs Standard JavaScript APIs XMLHttpRequest XMLHttpRequest HTML5 and other emerging APIs HTML5 and other emerging APIs WebKit APIs WebKit APIs V8 APIs, such as JSON V8 APIs, such as JSON APIs in bundled libraries APIs in bundled libraries 35

36. Programming language 36 Developer’s Guide

37. Developer's Guide 1. Changing the Google Chrome. 2. Browser Interaction. 2. Browser Interaction. 3. Implementation 3. Implementation 4. Finishing(Deployment) 37

38. Developer's Guide 1. Changing the Google Chrome. 1.1 Browser Actions 1.2 Context Menus 1.3 Desktop Notifications 1.4 Omnibox 1.5 Options Pages 1.6 Override Pages 1.7 Page Action 38

39. 1.Changing the Google Chrome. 39 1.1 Browser Actions

40. Developer's Guide 1.2 Context Menus 40

41. Developer's Guide 1.3 Desktop Notifications 41

42. Developer's Guide 1.4 Omnibox 42

43. Developer's Guide 1.5 Options Pages To allow users to customize the behavior of your extension, you may wish to provide an options page. 43

44. Developer's Guide 1.6 Override Pages 44

45. Developer's Guide 1.7 Page Action 45

46. Developer's Guide 2. Browser Interaction. 2. Browser Interaction. 2.1 Bookmarks 2.1 Bookmarks 2.2 Cookies 2.2 Cookies 2.3 Events 2.3 Events 2.4 History 2.4 History 2.5 Management 2.5 Management 2.6 Tabs 2.6 Tabs 2.7 Windows 2.7 Windows 46

47. 2. Browser Interaction. 2.1 Bookmarks 2.1 Bookmarks 47

48. 2. Browser Interaction. 2.2 Cookies 2.2 Cookies 48

49. 2. Browser Interaction. 2.3 Events 2.3 Events – An Event is an object that allows you to be notified when something interesting happens. – An Event is an object that allows you to be notified when something interesting happens. 49

50. 2. Browser Interaction. 2.4 History 50

51. 2. Browser Interaction. 2.5 Management 51

52. 2. Browser Interaction. 2.6 Tabs – Use the chrome.tabs module to interact with the browser's tab system. You can use this module to create, modify, and rearrange tabs in the browser. 52

53. 2. Browser Interaction. 2.7 Windows – Use the chrome.windows module to interact with browser windows. You can use this module to create, modify, and rearrange windows in the browser. 53

54. Developer's Guide 3.Implementation 3.Implementation 3.1 Background Page 3.1 Background Page 3.2 Content Scripts 3.2 Content Scripts 3.3 Cross-Origin XHR 3.3 Cross-Origin XHR 3.4 Message Passing 3.4 Message Passing 54

55. 3.1 Background Page Manifest.json 55 { "name": "My extension",... "background_page": "background.html",... } Background.html Image.html

56. 3.1 Background Page(Cont.) 56 Background.html

57. 3.1 Background Page(Cont.) 57 Image.html

58. 3.2 Content Scripts  If your content script's code should always be injected, register it in the extension manifest using the content_scripts field 58

59. 3.2 Content Scripts(Cont.)  If you want to inject the code only sometimes, use the permissions field instead, as described in Programmatic injection. 59

60. 3.2 Content Scripts(Cont.) Sandwich Example : Sandwich 60

61. 3.3 Cross-Origin XMLHttpRequest 61

62. 3.3 Cross-Origin XMLHttpRequest (Cont.) 62

63. 3.3 Cross-Origin XMLHttpRequest (Cont.) The readyState property holds the status of the XMLHttpRequest. 63

64. 3.3 Cross-Origin XMLHttpRequest (Cont.) Example : Demonstrates making cross domain requests from a content script by putting Twitter trends on Google News. Example : Demonstrates making cross domain requests from a content script by putting Twitter trends on Google News. 64 XMLHttpRequest https://api.twitter.com/1/trends/daily.json?exclude=hashtags API JSON

65. 3.3 Cross-Origin XMLHttpRequest (Cont.) 65 JSON UI

66. 3.4 Message Passing 66 3.4.1) Sample one-time requests 3.4.1) Sample one-time requests 3.4.2) Long-lived connections 3.4.2) Long-lived connections

67. 3.4.1 Sample one-time requests 67 contentscript.js Background.html Hello Goodbye

68. 3.4.1 Sample one-time requests(Cont.) Ex. Sending a message to the content script in the selected tab. Background.html  Send Message to selected tab 68

69. 3.4.1 Sample one-time requests(Cont.) 69 At Receiving - Need to set up chrome.extension.onRequest

70. 3.4.2. Long-lived connections 70 contentscript.js Background.html PORT

71. 3.4.2. Long-lived connections(Cont.) Contentscript.js 71 Background.html

72. 4. Finishing(Deployment) 4.1 Hosting 4.1 Hosting 4.2 Other Deployment Options 4.2 Other Deployment Options 72

73. 4.1 Hosting 4.1.1 Chrome Web Store 4.1.1 Chrome Web Store 4.1.2 Packaging 4.1.2 Packaging 73

74. 4.1 Hosting (Cont.) Chrome Web Store 74

75. chrome://settings/packExtensionOverlay.crx.pem manifest.json.html.js Packaging 4.2 Packaging 75

76. Private Key in.pem file 4.2 Packaging (Cont.) Private Key 76

77. 4.2 Packaging (Cont.) 77 chrome://settings/packExtensionOverlay.crx.pem manifest.json.html.js Updating

78. Other Deployment Options -installed automatically(external extension) -Using a preferences JSON file -Using the Windows registry (Windows only) -Auto updating 78

79. Programming language 79 Tools

80. Developer Tools 80

81. Debug Tools 81

82. Debug Tools 82 Elements panel Resources panel Network panel Script Timeline Profiles tool Audits panel Console

83. Programming language 83 3 - Tiers

84. Data Layer Business Logic Layer Presentation Layer UI Pages Background Pages Content Scripts 84

85. 3 Tiers(cont.) Data Layer Business Logic Layer Presentation Layer Chrome Extension Web Service Database 85

86. Programming language 86 Final Term Project

87. 87

88. Thank you 88