1 / 27

var title = “ Google Chrome Extensions ”;

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

hashim
Download Presentation

var title = “ Google Chrome Extensions ”;

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. 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 • "manifest_version": 2, • "name": "One-Click Translate Selection", • "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(onExtensionMessage);

  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 • <script src="/js/jquery-1.8.1.min.js"></script> • <script src="/js/popup.js"></script> • "background": { "scripts": ["jquery.js","background.js"] }, • Jsfiles 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/ • 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: Silver Sponsors: Technological Partners: Swag Sponsors: Media Partners:

  27. ???

More Related