880 likes | 1.06k Views
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.
E N D
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 System • Windows, Linux, Mac , Android • Latest Version • V. 19.0.1055.1 (Dev.)
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
Form of Chrome Extension Programming language
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.
Extension UIs • Page Actions • Use page actions to put icons inside the address bar.
Packaged App UIs • Packaged App UIs • A packaged app usually presents its main functionality using an HTML page that's bundled into the app.
Install Chrome Extension Programming language
Install Chrome Extension • How install Chrome Extension
Install Chrome Extension • Chrome Extension Page
Install Chrome Extension • Chrome Extension Store
Build Chrome Extension Programming language
Programming Language 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 • HTMLand Cascading Style Sheets (CSS) : • displays a nicely design web page.
Files in Chrome Extension Programming language
Files Related Files Html Files js Files manifest.json
Files TH En Files Files 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
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.
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
First Baby Extension Programming language
Architecture Programming language
Architecture of Chrome Extension • There are three type of architecture that run on Chrome extension which are • UI pages • The background page • Content scripts
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.
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.
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
Using APIs Programming language
APIs in Chrome Extension • There are two types of APIs that’s used in Chrome Extension • Chrome's APIs • Other APIs
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
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
Developer’s Guide Programming language
Developer's Guide • 1. Changing the Google Chrome. • 2. Browser Interaction. • 3. Implementation • 4. Finishing(Deployment)
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
1.Changing the Google Chrome. • 1.1 Browser Actions
Developer's Guide • 1.2 Context Menus
Developer's Guide • 1.3 Desktop Notifications
Developer's Guide • 1.4 Omnibox
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.
Developer's Guide • 1.6 Override Pages
Developer's Guide • 1.7 Page Action
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
2. Browser Interaction. • 2.1 Bookmarks
2. Browser Interaction. • 2.2 Cookies
2. Browser Interaction. • 2.3 Events • An Event is an object that allows you to be notified when something interesting happens.
2. Browser Interaction. • 2.4 History