chrome & opera extensions - gug spŠ tábor

Chrome & Opera Extensions

Radek Š[email protected]

Martin Š[email protected]

16. března 2011

Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 1 / 58

GTUGGoogle Technical User Groups


GUG v České republice


Proběhlé akce

Google Maps Application DevelopmentEffective programming in IntelliJ IDEAGoogle Web Toolkit (lecture, workshop)CZNIC: Internet administration, routing protocols and the way to IPv6In what are Chrome extensions better than Firefox plugins?Google Chrome hackatonGUGcampOpen source Red Hat vs. GoogleDjango and Google App EngineFlash and HTML5HTML5 and Android hackatonSelenium...


Jak zůstat v kontaktu?

http://www.gug.cz

http://twitter.com/gugcz

http://www.facebook.com/GUG.cz

http://www.youtube.com/gugczgroup

http://groups.google.com/group/gugcz


http://www.gug.cz

http://twitter.com/gugcz

http://www.facebook.com/GUG.cz

http://www.youtube.com/gugczgroup

http://groups.google.com/group/gugcz

Vytvořte HTML5/CSS3 aplikaci velikosti max. do 1kB (1024 bajtů)/připojené jQuery se nepočítá/ a krátce nám ji před akcí představte.

Nejlepší 3 aplikace získají ceny! Prezentace vašich aplikací budou zároveňzpropagovány na GUG.cz.


Agenda

Chrome Extensions (30-45 min)UIAPIpublishing (WebStore)měření úspěšnosti (Google Analytics)FAQ

Opera Extensions (30-45 min)Struktura rozšířeníTypy rozšířeníAPIPublikační proces

Live coding show - Chrome Extension


Proč Chrome Extensions?

Vše již léta známé technologie (HTML & CSS & JS)Spolehlivě obsáhlá implementace HTML5 & CSS3Integrované debuggovací nástrojePřipravené nástroje pro deployment (Google Code)Veřejná galerie rozšíření, kam kdokoliv může přispívat


manifest.json

manifest.json

{"name": "FIT Checker","version": "0.7","description": "Extension pro studenty FIT CTU","icons": {

"16": "media/img/icon-16.png","48": "media/img/icon-48.png","128": "media/img/icon-128.png"},

"browser_action": {"default_icon": "media/img/icon-19.png","default_title": "FIT Checker","default_popup": "popup.html"

},"options_page": "settings.html","permissions": [

"tabs","https://edux.fit.cvut.cz/*"

]}


Chrome UIJak může extension interagovat s uživatelem

1 Browser action2 Page action3 Override pages

1 Bookmark manager2 History3 New tab

4 Desktop Notifications5 Context Menu6 Option Pages


I. Browser actionAkce vyvolaná po kliknutí na ikonku v toolbaru

manifest.json

// ..."browser_action": {

"default_icon": "images/icon19.png","default_title": "Google Mail","default_popup": "popup.html"

},// ...

(a) Popup (b) Action


II. Page action

manifest.json

// ..."page_action": {

"default_icon": "icons/foo.png","default_title": "Do action","default_popup": "popup.html"

}// ...


III. Override pages

1 Bookmark manager - chrome://bookmarks2 History - chrome://history3 New tab - chrome://newtab

manifest.json

// ..."chrome_url_overrides" : {"pageToOverride": "myPage.html"// pageToOverride = (bookmarks|history|newtab)},// ...


chrome://bookmarks

chrome://history

chrome://newtab

IV. Desktop Notifications

HTML nebo plain-text hodnoty částí toastuvar notification1 = webkitNotifications.createNotification(

’48.png’,’Hello!’,’Lorem ipsum...’

);

var notification2 = webkitNotifications.createHTMLNotification(’notification.html’

);

notification1.show();

DEMORadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 14 / 58

http://slides.html5rocks.com/#notifications-api

V. Context Menu

integer chrome.contextMenus.create(object createProperties, function callback)

chrome.contextMenus.remove(integer menuItemId, function callback)

chrome.contextMenus.removeAll(function callback)

chrome.contextMenus.update(integer id, object updateProperties, functioncallback)


VI. Option PagesOddělená strana pro nastavení celé extension

Možnost ukládat nastavení lokálně do prohlížečeLocalStoragevar foo = localStorage.getItem("bar");localStorage.setItem("bar", foo);

WebSQL (SQLite)var db = openDatabase(’foo’, ’1.0’, ’foo’, 2 * 1024);db.transaction(function (tx) {

tx.executeSql(’INSERT INTO foo (id, text) VALUES (1, "foobar")’);}, function(tx, result){

sucessCallback(result);}, function(tx, error){

errorCallback(error);});


Chrome APIs

1 Background page2 Content script3 Message passing4 Cross-origin XHR5 Bookmarks6 Cookies7 Tabs


I. Background pageOtevřená HTML stránka po celou dobu životního cyklu prohlížeče

Dokud běží alespoň jedna instance Chrome, beží všechny background page.


II. Content script

Otravná reklama a její „standardní“ odstranění je neobvykle nemožné,nebo drahé (AdBlock apod.)Doplnění funkčnosti webu (často funkčnosti, která je jinak „premium“)

manifest.json

// ..."content_scripts": [

{"matches": ["http://www.google.com/*"],"css": ["mystyles.css"],"js": ["jquery.js", "myscript.js"]

}]// ...


III. Message passingZpůsob komunikace mezi jednotlivými částmi rozšíření

contentScript.js

chrome.extension.sendRequest({greeting: "hello"}, function(response) {console.log(response.farewell);

});

background.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {console.log(sender.tab ?

"from a content script:" + sender.tab.url :"from the extension");

if (request.greeting == "hello")sendResponse({farewell: "goodbye"});

elsesendResponse({});

});


IV. Cross-origin XHR

var xhr = new XMLHttpRequest();xhr.open("GET", "https://www.google.com", true);xhr.onreadystatechange = function() {if (xhr.readyState == 4) {

console.log(xhr.responseText);}

};xhr.send();


V. Bookmarks

chrome.bookmarks.create(object bookmark, function callback)

chrome.bookmarks.get(string or array of string idOrIdList, function callback)

chrome.bookmarks.getTree(function callback)

chrome.bookmarks.search(string query, function callback)

chrome.bookmarks.remove(string id, function callback)

chrome.bookmarks.onCreated.addListener(function(string id, BookmarkTreeNodebookmark) {...});


VI. Cookies

chrome.cookies.get(object details, function callback)

chrome.cookies.set(object details)

chrome.cookies.getAll(object details, function callback)

chrome.cookies.onChanged.addListener(function(object changeInfo) {...});


VII. Tabs

chrome.tabs.create(object createProperties, function callback)

chrome.tabs.captureVisibleTab(integer windowId, object options, functioncallback)

chrome.tabs.detectLanguage(integer tabId, function callback)

chrome.tabs.executeScript(integer tabId, object details, function callback)

chrome.tabs.insertCSS(integer tabId, object details, function callback)


Aktualizace

Aktualizační mechanismus Extensions (XML) – plně automatizováno

Změna oprávněníPokud se změní oprávnění v nové verzi, uživatel je dotázán

Každé rozšíření == unikátní ID vygenerované privátním klíčemNikdo jiný, než majitel privátního klíče, nemůže vydat aktualizaci kdané extension


FAQ - Answers

Kdo z vás vyvinul nějakou Chrome Extension?


FAQ - Answers

Jak přesunout extension z vlastního hostingu na WebStore a neztratituživatele?

Vydat novou verzi s WebStore-ovou update URLPřibalit key.pem (stávající privátní klíč)

manifest.json

"update_url": "http://clients2.google.com/service/update2/crx",


FAQ - Answers

Jak může extension využít již uložené přihlašovací údaje v prohlížeči?Otevřít tab na pozadí a spustit vlastní JS kód

chrome.tabs.create({’url’: ’https://server.with.saved.credentials.com’,’selected’: false

}, function(tab) {chrome.tabs.executeScript(tab.id, {

’code’:"var data = {};" +"data.user = document.forms[’login’].username.value;" +"data.pass = document.forms[’login’].password.value;" +"data.tab_id = " + tab.id + ";" +"chrome.extension.sendRequest(data);"

});});

chrome.extension.onRequest.addListener(function(request) {

chrome.tabs.remove(request.tab_id);success(request);

});


FAQ - Answers

Jaká úskalí může skrývat komunikace se servery via HTTPS?Nedůvěryhodný certifikát => komunikace nemožná

Měření úspěchů pomocí Google AnalyticsWebStore


https://www.google.com/analytics/reporting/?reset=1&id=40144100

http://www.google.com/intl/en/landing/chrome/webstore/create/success-stories.html

Q & A


Opera Extensions


Proč Opera Extensions?

Ano nebo ne?Podobné jako Chrome Extensions:

SpolečnéHTML, CSS, JavaScriptVeřejná galerie rozšíření

Opera postrádáPodpora HTML5 a CSS3 není kompletníDebuggovací nástroje nemají přímý přístup k rozšířeníNěkteré API funkce


Struktura rozšíření

/config.xml/index.html/background.js/popup.html/icons/example.png/options.html


Struktura rozšířeníconfig.xml

W3C standardDefinice informací o rozšířeníPotřebná oprávněníPočáteční uživatelské nastavení

<?xml version="1.0" encoding="utf-8" ?><widget xmlns="http://www.w3.org/ns/widgets" id="extensions:example" version="

1.0.0"><name>Example Extension</name><description>Short description</description><author href="http://example.org/tony/" email="[email protected]">Tony Manero

</author><license>License text</license><icon src="icons/icon-128.png"/><access origin="http://ajax.googleapis.com"/><update-description href="http://example.org/example/updates.xml"/>

</widget>


Struktura rozšířeníindex.html

Inicializace rozšířeníProces na pozadí

theButton = opera.contexts.toolbar.createItem({title : "Click here",icon : "icons/icon-18.png",popup : {

href : "popup.html",width : "460px",height : "600px"

}});opera.contexts.toolbar.addItem(theButton);


Struktura rozšířeníoptions.html

Další obyčejná HTML stránkaExistuje vzor designu od OperyPravděpodobně bude obsahovat formulář a (hodně) javascriptUkládání nastavení přes background procesUkládání do widget.preferences

Pevně daný název souboru


Typy rozšíření

Injected script + index.htmlButton + PopupA bookmarklet extensionContent analysisContent-aware actionAuto-action


Typy rozšířeníInjected script + index.html

Jednoduché, nevyužívá výhody APIPrůběžně se něco vykonává, uživatel pravděpodobně ani neví, že tamněco takového jeNapříklad: Redirect to HTTPS


Typy rozšířeníButton + Popup

Zobrazení HTML stránky v popupuUžitečné pro klienty webových služebPo otevření popupu vlastně jen obyčejný webNapříklad: FIT Checker


Typy rozšířeníA bookmarklet extension

Pracuje se stránkouUmožňuje měnit design a UI webuNapříklad: AdBlock+


Typy rozšířeníContent analysis

Provede se při načtení stránky, výsledky akce v popupu nebo natlačítkuAnalýza webu - použití nejvíce asi u vývojářských nástrojůMožnost použití: vytvoří v popupu galerii obrázků na stránce


Typy rozšířeníContent-aware action

Podobné jako předchozí, jen pracuje až po kliknutí na tlačítkoNemusíme chtít validovat HTML při každém načtení stránkyNapříklad: Validator


Typy rozšířeníAuto-action

"hlídací pes"Akce spouštěné jednou za daný časPoužití u hlídačů na různé novinkyNapříklad: GMail Checker


Opera API

Background processBrowser ToolbarInjected ScriptsPopupWindows and TabsMessaging


Opera APIBackground process

Přístup k toolbaruopera.contexts.toolbar;

Informace o rozšířeníwindow.widget.author;window.widget.preferences;

Jako jediný má přístup k rozšíření jako celkuPráva na práci s okny a tabyopera.extension.tabs;opera.extension.windows;


Opera APIBrowser Toolbar

Umožňuje práci s toolbaremopera.contexts.toolbar.length;

Vytváření, změny a rušení tlačítekvar button = opera.contexts.toolbar.createItem({

title : ’Example Extension’,icon : ’icons/icon-18.png’

});opera.contexts.toolbar.addItem(button);opera.contexts.toolbar.removeItem(button);

Nastavení popupuPráce s badge


Opera APIInjected Scripts

Pracují s objektem prohlížečeopera.extension;opera.addEventListener();opera.removeEventListener();

Množství událostí k poslechuPosílání zprávopera.postError(); // odesle zpravu do error consoleopera.extension.postMessage();


Opera APIPopup

Jednoduchéondisconnect;onmessage;

Posílání zprávpostMessage();


Opera APIWindows and Tabs

Zatím nekompletníOtevírání a zavírání tabů/okenUmožňuje přístup ke všem otevřeným oknům

opera.extension.windows.addEventListener();opera.extension.windows.create();opera.extension.windows.getAll();

opera.extension.tabs.addEventListener();opera.extension.tabs.create();


Opera APIMessaging

Posílání zpráv mezi jednotlivými částmi rozšířeníBackground processInjected scriptPopup

Řešení přes odchytávání událostíMezi Injected scriptem a popupem lze vytvořit komunikační kanál


Přihlášení k webové aplikaci

Cookies nejsou sdílené s prohlížečemAni simulace otevření tabu na pozadí nepomůžeNutné vlastní přihlášeníUložené jméno a heslo ve widget.preferences


Publikační proces

Nestačí jen nahrát na webSchvalovací proces

Nahrát rozšíření na web OperyPočkat, zda bude schválenoPublikováno nebo odmítnuto

Požadavky ke schváleníJménoKategorieLicencePopisIkona 64x64Alespoň jeden screenshot


Aktualizace

Soubor ve formátu XMLPokud není třeba aktualizovat, je prázdnýAutomatické aktualizace každých 24 hodinNa vlastním serveru potřeba definice typu souboru pro rozšířeníUživatel musí dát souhlas s důvěryhodností

<?xml version="1.0" encoding="utf-8" ?><update-info

xmlns="http://www.w3.org/ns/widgets"src="http://example.org/tony/example.oex"version="1.0.0"

></update-info>


Q & A


Srovnání Chrome a Opery

PozitivaChrome

HTML5, CSS3Opera

BezpečnostPráce s uživatelským nastavenímSchvalovací proces

NegativaChrome

Cookies safety?Opera

HTML5, CSS3Nesdílené cookiesAPI omezenější než u Chrome


Co teď?

Hurá programovat!


Odkazy

http://dev.opera.com/articles/view/opera-extensions-quick-documentation-overview/http://code.google.com/chrome/extensions/index.html

betadevtrunk


http://dev.opera.com/articles/view/opera-extensions-quick-documentation-overview/

http://dev.opera.com/articles/view/opera-extensions-quick-documentation-overview/

http://code.google.com/chrome/extensions/index.html

To už je vše přátelé

Děkujeme za pozornost


chrome & opera extensions - gug spŠ tábor

Technology