Google chrome extension
Download as PPTX, PDF1 like1,434 views
The document provides information about developing Chrome extensions. It discusses starting the development process by creating a folder to contain extension code and adding a manifest.json file. It also covers loading the extension for testing and adding additional code files. The document then discusses deployment options for extensions, including uploading extensions to the Chrome Web Store for publishing.
Google chrome extension
- 2. Bed Boys Gang Mr. Thapakit Student ID: 54701760 Sarakham Mr. Nattaphat Student ID: 54701995 Khamnon Mr. Vikornsak Student ID: 54703727 Rakhnoo Mr. Wissarut Student ID: 54703762 Katathikarn Mr. Somjean Student ID: 54704041 Sangdao Mr. Surasak Student ID: 54704304 Phetmanee
- 3. 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
- 4. Overview
- 5. 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
- 6. The Basics
- 10. Background Page
- 11. UI Pages
- 12. Content Scripts
- 13. Files
- 14. 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
- 15. The Manifest File (manifest.json) manifest.json
- 17. 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. Here's an example of function callback) the signature for an asynchronous method:
- 18. Asynchronous vs. • Synchronousare synchronous. Other chrome.* methods • Synchronous methods never have a callback because they don't return until they've completed all their work. • Often, synchronous methods have a return type. Consider the • DOMWindow chrome.extension.getBackgroundPage() chrome.extensions.getBackgroundPage() method:
- 21. Communication • betweenwithin an extension often The HTML pages Pages need to communicate. • Because all of an extension's 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 extension's pages execute in same process on the same thread, the pages can make direct function calls to each
- 23. 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 it's from a window that's in incognito mode. • By default, extensions don't run in incognito windows, and packaged apps do. • You need to consider what a user expects
- 24. 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, don't save history from incognito windows. • On the other hand, you can store your extension's settings
- 25. Saving data & Incognito mode If a piece of data might show where a user has been on the web or what the user has done, don't store it if it's from an incognito window.
- 26. Saving data & Incognito mode
- 28. 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
- 29. JSON – built 2 structures A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array. An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.
- 30. Object
- 31. Array
- 32. Value
- 33. String
- 34. Number
- 35. JSON Example manifest.json
- 37. Browser UI Changing the Google Chrome chrome Browser Actions Add icons to the toolbar (extensions only) Desktop Notify users of important events Notifications Omnibox Add a keyword to the address bar Option Pages Let users customize your extension Override Pages Implement your own version of standard browser pages such as the New Tab page Page Actions Add temporary icons inside the address bar (extensions only)
- 38. Browser Interaction Interacting with Google in other ways Bookmarks Create, organize, and otherwise manipulate the user's bookmarks Cookies Explore and modify the browser's cookie system Events Detect when something interesting happens History Interact with the browser's record of visited pages Tabs Create, modify, and rearrange tabs in the browser Windows Create, modify, and rearrange windows in the browser
- 39. Implementation Implementing the innards of your extension Accessibility Make your extension accessible to (a11y) people with disabilities Background Put all the common code for your Pages extension in a single place Content-Scripts Run JavaScript code in the context of web pages Cross-Origin XHR Use XMLHttpRequest to send and receive data from remote servers
- 40. Implementation (cont.) Implementing the innards of your extension Internationalizati Deal with language and locale on Message Passing Communicate from a content script to its parent extension, or vice versa Optional Modify your extension's permissions Permissions NPAPI Plugins Load native binary code
- 41. Finishing Finishing and distributing your extension Autoupdating Update extensions automatically Hosting Host extensions on Google servers or your own Other Distribute extensions on your network Deployment or with other software Options Paging Create a .crx file so you can distribute your extension
- 42. Developme nt
- 43. Create and Load an extension 1. Create a folder somewhere on your computer to contain your extension's code. 2. Inside your extension's folder, create a text file called manifest.json, and put this in it
- 44. Create and Load an extension 3. Copy this icon to the same folder: http://www.box.com/s/6418basa92a0lyckshix 4. 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.
- 45. Create and Load an extension If your extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page, as the following screenshot shows
- 46. Add code to the extension http://www.box.com/s/82e9lh yvh8ri6o8cs61e
- 47. Add code to the extension Return to the extensions management page, and click the Reload button to load the new version of the extension Click the extension's icon. A popup should appear that displays the contents of popup.html
- 48. Add code to the extension
- 49. Deploymen t
- 50. Extensions for Chrome Contains extensions for Chrome, which change how the browser behaves and, in a limited way, how it looks If your extension seems more like a website than a small browser add-on, consider making it a packaged app. Packaged apps are implemented as extensions that have the additional ability to present an app-like interface
- 51. Extensions for Chrome manifest, and Every app has a most likely icons, that you put into a ZIP file and upload to the Chrome Developer Dashboard. The Chrome Web Store takes the contents of this ZIP file and puts them in a cryptographically signed .crx file. Users download this .crx and To create installable web apps file when they click the you extensions, Install button for your app should be familiar with HTML, JavaScript, and CSS. If you're targeting Chrome exclusively, you can depend on HTML5 and the other emerging APIs that Chrome supports
- 53. Uploading and Publishing To publish apps to the Chrome Web Store, you first use the Chrome Developer Dashboard to upload your app and specify how its listing should look. Then you can publish it either to the world at large or to a few trusted testers.
- 55. Uploading and Publishing 9 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:
- 56. Uploading and Publishing 9 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:
- 57. Benefits
- 58. Speed Chrome has taken it a step further. Chrome is the ultimate in fast browsing. With Internet connections getting faster and faster, a browser should be able to keep up with the pace of rendering images and content, which is what Google have managed to do perfectly.
- 59. Simplicity Chrome on the other hand has arranged everything in an organized manner, meaning the focus remains entirely on what it should be – browsing the Internet.
- 60. Extensions The extension support in Chrome has been done fantastically. The ease of installing new plugins means no restart is needed, and the browser speed doesn’t suffer when lots of extensions are installed. The functional support for add-ons means full support for Grease Monkey scripts too, which is a great added bonus.