1 / 88

Presented by…. Group 2

Chrome Extension. Presented by…. Group 2. Introduction. Programming language. Introduction. What is Google Chrome?. Google Chrome is a freeware web browser Developed by Google Inc. Operating Syste m Windows, Linux, Mac , Android Latest Version V. 19.0.1055.1 (Dev.). Introduction.

ami
Télécharger la présentation

Presented by…. Group 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chrome Extension Presented by…. Group 2

  2. Introduction Programming language

  3. Introduction • What is Google Chrome? • 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.)

  4. Introduction • What is Chrome Extension? • 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

  5. Form of Chrome Extension Programming language

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

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

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

  9. Install Chrome Extension Programming language

  10. Install Chrome Extension • How install Chrome Extension

  11. Install Chrome Extension • Chrome Extension Page

  12. Install Chrome Extension • Chrome Extension Store

  13. Build Chrome Extension Programming language

  14. Programming Language Programming language

  15. 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 • HTMLand Cascading Style Sheets (CSS) : • displays a nicely design web page.

  16. Files in Chrome Extension Programming language

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

  18. Files TH En Files Files CH

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

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

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

  22. Manifest file: Fields

  23. Manifest file: Fields

  24. Manifest file: Fields

  25. Manifest file: Fields

  26. First Baby Extension Programming language

  27. Architecture Programming language

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

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

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

  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. • For example, finding unlinked URLs in web pages and convert them into hyperlinks

  32. Using APIs Programming language

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

  34. APIs in Chrome Extension • Chrome's APIs • Google Chrome provides APIs such as chrome.bookmarks.* andchrome.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

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

  36. Developer’s Guide Programming language

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

  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

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

  40. Developer's Guide • 1.2 Context Menus

  41. Developer's Guide • 1.3 Desktop Notifications

  42. Developer's Guide • 1.4 Omnibox

  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.

  44. Developer's Guide • 1.6 Override Pages

  45. Developer's Guide • 1.7 Page Action

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

  47. 2. Browser Interaction. • 2.1 Bookmarks

  48. 2. Browser Interaction. • 2.2 Cookies

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

  50. 2. Browser Interaction. • 2.4 History

More Related