Google Chrome Extensions var title = “ Google Chrome Extensions ”; $(this).attr(“title”,...
-
Upload
justina-hubbard -
Category
Documents
-
view
229 -
download
0
description
Transcript of Google Chrome Extensions var title = “ Google Chrome Extensions ”; $(this).attr(“title”,...
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?• 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
Where to start?• http://developer.chrome.com/extensions/index.ht
ml
Browser action
Popup
Page action
Manifest file• http://developer.chrome.com/extensions/manifest
.html
manifest.json
• Mandatoryo"manifest_version": 2,o"name": "One-Click Translate
Selection",o"version": "2.0",
Background
Icons
Options
• "options_page": "options.html",
Content scripts
Browser action
Change icon at runtime• chrome.browserAction.setIcon({path: ‘icon19-
active.png'});
Permissions
Message Passing• http://
developer.chrome.com/extensions/messaging.html
Send Message• From background.js
Receive Message• From content_script.js• chrome.extension.onRequest.addListener(onExtensionMess
age);
Demo
Debug
Publishing• As “sources”• As .crx file• Chrome Web Store• Demo
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.
jQuery• Avoid using of CDN• Load jQuery in popup.html
o <script src="/js/jquery-1.8.1.min.js"></script>o <script src="/js/popup.js"></script>
• "background": { "scripts": ["jquery.js","background.js"] },
• Js files are loaded in the order they are specified!!!
• Injecting jQuery?
Links• http://goo.gl/bnXrgQ
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
Thanks to our Sponsors:Diamond Sponsor:
Gold Sponsors:
Swag Sponsors: Media Partners:
Technological Partners:
Silver Sponsors:
???