Presented by…. Group 2 1

CHROME EXTENSION

Programming language

2

Introduction

Introduction

• What is Google Chrome?

3

– Google Chrome is a freeware web browser• Developed by – Google Inc.

• Operating System– Windows, Linux, Mac , Android

• Latest Version– V. 19.0.1055.1 (Dev.)

Introduction

• 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

Programming language

5

Form of Chrome Extension

Extension UIs

• 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

Extension UIs

• Page Actions– Use page actions to put icons inside the address

bar.

7

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

Programming language

9

Install Chrome Extension

Install Chrome Extension

• How install Chrome Extension

10

Install Chrome Extension

• Chrome Extension Page

11

Install Chrome Extension

• Chrome Extension Store

12

Programming language

13

Build Chrome Extension

Programming language

14

Programming Language

Programming language

• Language & Technique:– Java script: • runs inside web page.

– XmlHttpRequest: • talks to a server.

– Cookies, Local Storage or HTML 5 Database:• persist some data

– HTML and Cascading Style Sheets (CSS) : • displays a nicely design web page.

15

Programming language

16

Files in Chrome Extension

Files

17

manifest.jsonjs Files

Related Files

Html Files

Files

Files

18

Files

EnTH

CH

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

19

Manifest file

• The manifest file, called manifest.json JSON-format (JavaScript Object Notation)• Giving information about the extension, such

as the most important files and the capabilities that the extension might use.

20

Manifest file: Fields• The following code shows the supported

manifest fields • Manifest fields consist of 4 types which are

– 1. Required field– 2. Recommended Field– 3. Action Field– 4. Other Field

21

Manifest file: Fields

22

Manifest file: Fields

23

Manifest file: Fields

24

Manifest file: Fields

25

Programming language

26

First Baby Extension

Programming language

27

Architecture

Architecture of Chrome Extension

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

28

Architecture of Chrome Extension

• 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.

29

Architecture of Chrome 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.

30

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.

• For example, finding unlinked URLs in web pages and convert them into hyperlinks

31

Programming language

32

Using APIs

APIs in Chrome Extension

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

33

APIs in Chrome Extension

• Chrome's APIs• 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• Supported APIs which now supported in Chrome APIs • Experimental APIs which will become supported APIs in

future releases of Chrome

34

APIs in Chrome Extension

• Other APIs such as• Standard JavaScript APIs• XMLHttpRequest• HTML5 and other emerging APIs• WebKit APIs• V8 APIs, such as JSON• APIs in bundled libraries

35

Programming language

36

Developer’s Guide

Developer's Guide

• 1. Changing the Google Chrome.• 2. Browser Interaction.• 3. Implementation• 4. Finishing(Deployment)

37

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

1.Changing the Google Chrome.

39

• 1.1 Browser Actions

Developer's Guide• 1.2 Context Menus

40

Developer's Guide• 1.3 Desktop Notifications

41

Developer's Guide• 1.4 Omnibox

42

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

Developer's Guide• 1.6 Override Pages

44

Developer's Guide• 1.7 Page Action

45

Developer's Guide

• 2. Browser Interaction.• 2.1 Bookmarks• 2.2 Cookies• 2.3 Events• 2.4 History• 2.5 Management• 2.6 Tabs• 2.7 Windows

46

2. Browser Interaction.• 2.1 Bookmarks

47

2. Browser Interaction.• 2.2 Cookies

48

2. Browser Interaction.• 2.3 Events

– An Event is an object that allows you to be notified when something interesting happens.

49

2. Browser Interaction.• 2.4 History

50

2. Browser Interaction.• 2.5 Management

51

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

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

Developer's Guide

• 3.Implementation• 3.1 Background Page• 3.2 Content Scripts• 3.3 Cross-Origin XHR• 3.4 Message Passing

54

3.1 Background Page

Manifest.json

55

{ "name": "My extension", ... "background_page": "background.html", ... }

Background.html

Image.html

3.1 Background Page(Cont.)

56

Background.html

3.1 Background Page(Cont.)

57

Image.html

3.2 Content ScriptsIf your content script's code should always be

injected, register it in the extension manifest using the content_scripts field

58

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

3.2 Content Scripts(Cont.)

• Example : Sandwich

60

3.3 Cross-Origin XMLHttpRequest

61

3.3 Cross-Origin XMLHttpRequest (Cont.)

62

3.3 Cross-Origin XMLHttpRequest (Cont.)

• The readyState property holds the status of the XMLHttpRequest.

63

3.3 Cross-Origin XMLHttpRequest (Cont.)

• 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

3.3 Cross-Origin XMLHttpRequest (Cont.)

65

JSON

UI

3.4 Message Passing

66

• 3.4.1) Sample one-time requests• 3.4.2) Long-lived connections

3.4.1 Sample one-time requests

67

contentscript.js Background.html

Hello

Goodbye

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

3.4.1 Sample one-time requests(Cont.)

69

• At Receiving

- Need to set up chrome.extension.onRequest

3.4.2. Long-lived connections

70

contentscript.js Background.html

PORT

3.4.2. Long-lived connections(Cont.)

• Contentscript.js

71

• Background.html

4. Finishing(Deployment)

• 4.1 Hosting• 4.2 Other Deployment Options

72

4.1 Hosting

• 4.1.1 Chrome Web Store• 4.1.2 Packaging

73

4.1 Hosting (Cont.)

Chrome Web Store

74

chrome://settings/packExtensionOverlay

.crx .pem

manifest.json

.html

.js

Packaging4.2 Packaging

75

Private Key in .pem file

4.2 Packaging (Cont.) Private Key

76

4.2 Packaging (Cont.)

77

chrome://settings/packExtensionOverlay

.crx

.pem

manifest.json

.html

.js

Updating

Other Deployment Options

- installed automatically(external extension)- Using a preferences JSON file- Using the Windows registry (Windows only)

- Auto updating

78

Programming language

79

Tools

Developer Tools

80

MS Visual Studio

Dreamweaver

Notepad++Notepad

Edit Plus

Debug Tools

81

Debug Tools

82

Elements panel

Resources panel

Network panel

Script

Timeline

Profiles tool

Audits panel

Console

Programming language

83

3 - Tiers

3 - Tiers

Data Layer

Business Logic Layer

Presentation Layer UI Pages

Background Pages

Content Scripts

84

3 Tiers(cont.)

Data Layer

Business Logic Layer

Presentation Layer

Chrome Extension

Web Service

Database

85

Programming language

86

Final Term Project

87

Thank you

88