Download
var title google chrome extensions n.
Skip this Video
Loading SlideShow in 5 Seconds..
var title = “ Google Chrome Extensions ”; PowerPoint Presentation
Download Presentation
var title = “ Google Chrome Extensions ”;

var title = “ Google Chrome Extensions ”;

153 Vues Download Presentation
Télécharger la présentation

var title = “ Google Chrome Extensions ”;

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