Chrome & Opera Extensions

Radek Šimkoradek.simko@gmail.com

Martin Šteklmartin.stekl@gmail.com

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

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

{"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)},// ...

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

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

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="tony@example.org">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>

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

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

Děkujeme za pozornost

Chrome & Opera Extensions - GUG SPŠ Tábor

Transcript of Chrome & Opera Extensions - GUG SPŠ Tábor

Chrome & Opera Extensions - GUG SPŠ Tábor

Technology

Transcript of Chrome & Opera Extensions - GUG SPŠ Tábor

fhLfspd; gug;gsthdJ

Gug Gateway 1.0 en Dt

Obchodní akademie a VOŠE Tábor, CZECH REPUBLIC. CONTENTS This presentation is about our school subjects We will talk about : 1) English 2) Economics.

Housův mlýn T Tábor ábor Meetings · Paradise courtyard Dean church of Lord's conversion on Tabor mountain Husitte museum, no. 1 – Gothic hall, underground corridors House no.

Document1 - cours, examens...10) 90 t 43..." GUG 60 70 go CAGACCTGGGCGGGCTCCCACTCCATGAGGTATTTC GTCTGGACCCGCCCGAGGGTGAGGTACTCCATAAAG CAGACCUGGGCGGGCUCCCACUCCAUGAGGUAUUUC GlnThrTrpA1aG1

Gaudi Users Guide - CERNcern.ch/lhcb-comp/Frameworks/Gaudi/Gaudi_v9/GUG/GUG-2up.pdf · Gaudi Users Guide Chapter 1 Introduction Version/Issue: 9/0 Chapter 1 Introduction 1.1 Purpose

GUG Newsletter Issue No. 3

Bátor Tábor · 2017-02-20 · ANNUAL REPORT 2015 Bátor Tábor . ... group selfies 660 OFFICE, EXTERNAL AND CORPORATE VOLUNTEERS 47 000 Facebook followers 6 TYPES OF ILLNESSES ...

i njhFg;G gug;gsT d - Amazon Web Services€¦ · 10&11 i i cdcdcdcdcd d d gug;gsT Mr.N.PIRASANNA Dip.In.Maths (Merit) Vivekananda College Colombo 0778794832 / 0754306497 /0758885888

GUG Newsletter No:3

GUG Newsletter No. 8

Bátor Tábor · ANNUAL REPORT 2017. We create life-changing experiences, build strength and confidence and help develop tools necessary for life and ... participated in three Bator

Seung-gi GUG Korea Maritime University Chairman of FERNS TWG Seung-gi GUG Korea Maritime University Chairman of FERNS TWG 24 th -25 th, Sept., 2007 STATUS.

Gug Gateway 1.0 en Cx210 Dx430

H)H H)GUG GMG < q#ÝFéG GaGQG>GUG GM #. /¡Fø Ò Fþ ¥ ö · SCATLINE Vol. 95 17 75"b ÓÛ@, ^ d_0¿*(I Z8rM@ Q QWZ "I_4 wx 0¿b ó ² 0b ò Su_ Y B* x Y B^/ · 0bXE ÉÜ£î©Ùå@

Student survey report final - Erasmus Plus - SPŠ Svidník

Měsíčník turistického oddílu mládeže Roháči 2713 Kladnopřiběhl náš průvodce doktor Hudr Pudr Nevim s tím, že nedaleko stojí zcela zničený tábor profesora Škody,

GUG eMachines 1.0 en DT

#+0{ G £ GUG GMFþ)+ $×

Bátor Tábor - batortabor.huANNUAL REPORT 2015 Bátor Tábor . Stepping over our boundaries is a good thing, be it either the crossing of country borders or stepping over language

H)H H)GUG GMG < q#ÝFéG GaGQG>GUG GM #. /¡Fø Ò Fþ ¥ ö · SCATLINE Vol. 95 17 75"b ÓÛ@, ^ d_0¿(I Z8rM@ Q QWZ "I_4 wx 0¿b ó ² 0b ò Su_ Y B x Y B^/ · 0bXE ÉÜ£î©Ùå@