Presentation is loading. Please wait.

Presentation is loading. Please wait.

Google Chrome Extensions var title = “ Google Chrome Extensions ”; $(this).attr(“title”, title); $(this).data({ description: ‘How to create and distribute’,

Similar presentations


Presentation on theme: "Google Chrome Extensions var title = “ Google Chrome Extensions ”; $(this).attr(“title”, title); $(this).data({ description: ‘How to create and distribute’,"— Presentation transcript:

1 Google Chrome Extensions var title = “ Google Chrome Extensions ”; $(this).attr(“title”, title); $(this).data({ description: ‘How to create and distribute’, by: ‘Christo Tsvetanov’ });

2 What is Google Chrome Extension? Small software programs that can modify and enhance the functionality of the Chrome browser. HTML, JavaScript, jQuery, and CSS Browser action Page action Manifest file Background page Popup Content script

3 Where to start? http://developer.chrome.com/extensions/index.html

4 Browser action

5 Popup

6 Page action

7 Manifest file http://developer.chrome.com/extensions/manifest.html

8 manifest.json Mandatory o "manifest_version": 2, o "name": "One-Click Translate Selection", o "version": "2.0",

9 Background

10 Icons

11 Options "options_page": "options.html",

12 Content scripts

13 Browser action

14 Change icon at runtime chrome.browserAction.setIcon({path: ‘icon19- active.png'});

15 Permissions

16 Message Passing http://developer.chrome.com/extensions/messaging.html

17 Send Message From background.js

18 Receive Message From content_script.js chrome.extension.onRequest.addListener(onExtensionMe ssage);

19 Demo

20 Debug

21 Publishing As “sources” As.crx file Chrome Web Store Demo

22 Best Practices Use Browser Actions for features that make sense on most pages. Use Page Actions for features that make sense for only a few pages Do use big, colorful icons that make the most of the 19x19-pixel space. Do use alpha transparency to add soft edges to your icon.

23 jQuery Avoid using of CDN Load jQuery in popup.html o "background": { "scripts": ["jquery.js","background.js"] }, Js files are loaded in the order they are specified!!! Injecting jQuery?

24 Links http://goo.gl/bnXrgQ

25 Lazy method Go to https://chrome.google.com/webstore/https://chrome.google.com/webstore/ In search bar type: translate selection On top select the Extensions tab Find the extension with author Christo Tsvetanov

26 Thanks to our Sponsors: Diamond Sponsor: Gold Sponsors: Swag Sponsors:Media Partners: Technological Partners: Silver Sponsors:

27 ???


Download ppt "Google Chrome Extensions var title = “ Google Chrome Extensions ”; $(this).attr(“title”, title); $(this).data({ description: ‘How to create and distribute’,"

Similar presentations


Ads by Google