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?• 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:

???