Chrome & Opera Extensions - GUG SPŠ Tábor

Chrome & Opera Extensions Radek Šimko radek.simko@gmail.com Martin Štekl martin.stekl@gmail.com 16. března 2011Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 1 / 58

GTUG Google Technical User GroupsRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 2 / 58

GUG v České republiceRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 3 / 58

Proběhlé akce Google Maps Application Development Eﬀective programming in IntelliJ IDEA Google Web Toolkit (lecture, workshop) CZNIC: Internet administration, routing protocols and the way to IPv6 In what are Chrome extensions better than Firefox plugins? Google Chrome hackaton GUGcamp Open source Red Hat vs. Google Django and Google App Engine Flash and HTML5 HTML5 and Android hackaton Selenium ...Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 4 / 58

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/gugczRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 5 / 58

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.Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 6 / 58

Agenda Chrome Extensions (30-45 min) UI API publishing (WebStore) měření úspěšnosti (Google Analytics) FAQ Opera Extensions (30-45 min) Struktura rozšíření Typy rozšíření API Publikační proces Live coding show - Chrome ExtensionRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 7 / 58

Proč Chrome Extensions? Vše již léta známé technologie (HTML & CSS & JS) Spolehlivě obsáhlá implementace HTML5 & CSS3 Integrované debuggovací nástroje Připravené nástroje pro deployment (Google Code) Veřejná galerie rozšíření, kam kdokoliv může přispívatRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 8 / 58

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/*" ]}Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 9 / 58

Chrome UI Jak může extension interagovat s uživatelem 1 Browser action 2 Page action 3 Override pages 1 Bookmark manager 2 History 3 New tab 4 Desktop Notiﬁcations 5 Context Menu 6 Option PagesRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 10 / 58

I. Browser action Akce 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) ActionRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 11 / 58

II. Page action manifest.json // ... "page_action": { "default_icon": "icons/foo.png", "default_title": "Do action", "default_popup": "popup.html" } // ...Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 12 / 58

III. Override pages 1 Bookmark manager - chrome://bookmarks 2 History - chrome://history 3 New tab - chrome://newtab manifest.json // ... "chrome_url_overrides" : { "pageToOverride": "myPage.html" // pageToOverride = (bookmarks|history|newtab) }, // ...Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 13 / 58

IV. Desktop Notiﬁcations HTML nebo plain-text hodnoty částí toastu var 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, function callback)Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 15 / 58

VI. Option Pages Oddělená strana pro nastavení celé extension Možnost ukládat nastavení lokálně do prohlížeče LocalStorage var 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); });Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 16 / 58

Chrome APIs 1 Background page 2 Content script 3 Message passing 4 Cross-origin XHR 5 Bookmarks 6 Cookies 7 TabsRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 17 / 58

I. Background page Otevřená HTML stránka po celou dobu životního cyklu prohlížeče Dokud běží alespoň jedna instance Chrome, beží všechny background page.Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 18 / 58

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"] } ] // ...Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 19 / 58

III. Message passing Způ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"}); else sendResponse({}); });Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 20 / 58

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();Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 21 / 58

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, BookmarkTreeNode bookmark) {...});Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 22 / 58

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) {...});Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 23 / 58

VII. Tabs chrome.tabs.create(object createProperties, function callback) chrome.tabs.captureVisibleTab(integer windowId, object options, function callback) 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)Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 24 / 58

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íčem Nikdo jiný, než majitel privátního klíče, nemůže vydat aktualizaci k dané extensionRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 25 / 58

FAQ - Answers Kdo z vás vyvinul nějakou Chrome Extension?Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 26 / 58

FAQ - Answers Jak přesunout extension z vlastního hostingu na WebStore a neztratit uživatele? Vydat novou verzi s WebStore-ovou update URL Přibalit key.pem (stávající privátní klíč) manifest.json "update_url": "http://clients2.google.com/service/update2/crx",Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 27 / 58

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); } );Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 28 / 58

FAQ - Answers Jaká úskalí může skrývat komunikace se servery via HTTPS? Nedůvěryhodný certiﬁkát => komunikace nemožná Měření úspěchů pomocí Google Analytics WebStoreRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 29 / 58

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

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

Proč Opera Extensions? Ano nebo ne? Podobné jako Chrome Extensions: Společné HTML, CSS, JavaScript Veř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 funkceRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 32 / 58

Struktura rozšíření /conﬁg.xml /index.html /background.js /popup.html /icons/example.png /options.htmlRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 33 / 58

Struktura rozšíření conﬁg.xml W3C standard Deﬁnice 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>Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 34 / 58

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);Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 35 / 58

Struktura rozšíření options.html Další obyčejná HTML stránka Existuje vzor designu od Opery Pravděpodobně bude obsahovat formulář a (hodně) javascript Ukládání nastavení přes background proces Ukládání do widget.preferences Pevně daný název souboruRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 36 / 58

Typy rozšíření Injected script + index.html Button + Popup A bookmarklet extension Content analysis Content-aware action Auto-actionRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 37 / 58

Typy rozšíření Injected script + index.html Jednoduché, nevyužívá výhody API Průběžně se něco vykonává, uživatel pravděpodobně ani neví, že tam něco takového je Například: Redirect to HTTPSRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 38 / 58

Typy rozšíření Button + Popup Zobrazení HTML stránky v popupu Užitečné pro klienty webových služeb Po otevření popupu vlastně jen obyčejný web Například: FIT CheckerRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 39 / 58

Typy rozšíření A bookmarklet extension Pracuje se stránkou Umožňuje měnit design a UI webu Například: AdBlock+Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 40 / 58

Typy rozšíření Content analysis Provede se při načtení stránky, výsledky akce v popupu nebo na tlačítku Analý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ánceRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 41 / 58

Typy rozšíření Content-aware action Podobné jako předchozí, jen pracuje až po kliknutí na tlačítko Nemusíme chtít validovat HTML při každém načtení stránky Například: ValidatorRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 42 / 58

Typy rozšíření Auto-action "hlídací pes" Akce spouštěné jednou za daný čas Použití u hlídačů na různé novinky Například: GMail CheckerRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 43 / 58

Opera API Background process Browser Toolbar Injected Scripts Popup Windows and Tabs MessagingRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 44 / 58

Opera API Background process Přístup k toolbaru opera.contexts.toolbar; Informace o rozšíření window.widget.author; window.widget.preferences; Jako jediný má přístup k rozšíření jako celku Práva na práci s okny a taby opera.extension.tabs; opera.extension.windows;Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 45 / 58

Opera API Browser Toolbar Umožňuje práci s toolbarem opera.contexts.toolbar.length; Vytváření, změny a rušení tlačítek var button = opera.contexts.toolbar.createItem({ title : ’Example Extension’, icon : ’icons/icon-18.png’ }); opera.contexts.toolbar.addItem(button); opera.contexts.toolbar.removeItem(button); Nastavení popupu Práce s badgeRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 46 / 58

Opera API Injected Scripts Pracují s objektem prohlížeče opera.extension; opera.addEventListener(); opera.removeEventListener(); Množství událostí k poslechu Posílání zpráv opera.postError(); // odesle zpravu do error console opera.extension.postMessage();Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 47 / 58

Opera API Popup Jednoduché ondisconnect; onmessage; Posílání zpráv postMessage();Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 48 / 58

Opera API Windows and Tabs Zatím nekompletní Otevírání a zavírání tabů/oken Umožň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();Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 49 / 58

Opera API Messaging Posílání zpráv mezi jednotlivými částmi rozšíření Background process Injected script Popup Řešení přes odchytávání událostí Mezi Injected scriptem a popupem lze vytvořit komunikační kanálRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 50 / 58

Přihlášení k webové aplikaci Cookies nejsou sdílené s prohlížečem Ani simulace otevření tabu na pozadí nepomůže Nutné vlastní přihlášení Uložené jméno a heslo ve widget.preferencesRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 51 / 58

Publikační proces Nestačí jen nahrát na web Schvalovací proces Nahrát rozšíření na web Opery Počkat, zda bude schváleno Publikováno nebo odmítnuto Požadavky ke schválení Jméno Kategorie Licence Popis Ikona 64x64 Alespoň jeden screenshotRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 52 / 58

Aktualizace Soubor ve formátu XML Pokud není třeba aktualizovat, je prázdný Automatické aktualizace každých 24 hodin Na vlastním serveru potřeba deﬁnice 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>Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 53 / 58

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

Srovnání Chrome a Opery Pozitiva Chrome HTML5, CSS3 Opera Bezpečnost Práce s uživatelským nastavením Schvalovací proces Negativa Chrome Cookies safety? Opera HTML5, CSS3 Nesdílené cookies API omezenější než u ChromeRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 55 / 58

Co teď? Hurá programovat!Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 56 / 58

Odkazy http://dev.opera.com/articles/view/ opera-extensions-quick-documentation-overview/ http://code.google.com/chrome/extensions/index.html beta dev trunkRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 57 / 58

To už je vše přátelé Děkujeme za pozornostRadek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 58 / 58

Chrome & Opera Extensions - GUG SPŠ Tábor

by Radek Simko on Mar 23, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 290

Statistics

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