Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Chrome & Opera Extensions - GUG SPŠ Tábor

980 views

Published on

GUG SPŠ Tábor (Czech Republic) - Chrome & Opera Extensions
http://sps-tabor.gug.cz/2011/02/zveme-na-akci-chrome-opera-extensions.html

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Chrome & Opera Extensions - GUG SPŠ Tábor

  1. 1. Chrome & Opera Extensions Radek Šimko radek.simko@gmail.com Martin Štekl martin.stekl@gmail.com 16. března 2011 Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 1 / 58
  2. 2. GTUG Google Technical User Groups Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 2 / 58
  3. 3. GUG v České republice Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 3 / 58
  4. 4. Proběhlé akce Google Maps Application Development Effective 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
  5. 5. 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 Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 5 / 58
  6. 6. 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
  7. 7. 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 Extension Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 7 / 58
  8. 8. 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ívat Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 8 / 58
  9. 9. 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
  10. 10. 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 Notifications 5 Context Menu 6 Option Pages Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 10 / 58
  11. 11. 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) Action Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 11 / 58
  12. 12. 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
  13. 13. 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
  14. 14. IV. Desktop Notifications HTML nebo plain-text hodnoty částí toastu var notification1 = webkitNotifications.createNotification( ’48.png’, ’Hello!’, ’Lorem ipsum...’ ); var notification2 = webkitNotifications.createHTMLNotification( ’notification.html’ ); notification1.show(); DEMO Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 14 / 58
  15. 15. 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
  16. 16. 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
  17. 17. Chrome APIs 1 Background page 2 Content script 3 Message passing 4 Cross-origin XHR 5 Bookmarks 6 Cookies 7 Tabs Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 17 / 58
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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é extension Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 25 / 58
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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 Analytics WebStore Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 29 / 58
  30. 30. Q & A Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 30 / 58
  31. 31. Opera Extensions Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 31 / 58
  32. 32. 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 funkce Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 32 / 58
  33. 33. Struktura rozšíření /config.xml /index.html /background.js /popup.html /icons/example.png /options.html Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 33 / 58
  34. 34. Struktura rozšíření config.xml W3C standard Definice 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
  35. 35. 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
  36. 36. 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 souboru Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 36 / 58
  37. 37. Typy rozšíření Injected script + index.html Button + Popup A bookmarklet extension Content analysis Content-aware action Auto-action Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 37 / 58
  38. 38. 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 HTTPS Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 38 / 58
  39. 39. 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 Checker Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 39 / 58
  40. 40. 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
  41. 41. 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ánce Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 41 / 58
  42. 42. 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: Validator Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 42 / 58
  43. 43. 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 Checker Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 43 / 58
  44. 44. Opera API Background process Browser Toolbar Injected Scripts Popup Windows and Tabs Messaging Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 44 / 58
  45. 45. 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
  46. 46. 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 badge Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 46 / 58
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. 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ál Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 50 / 58
  51. 51. 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.preferences Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 51 / 58
  52. 52. 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 screenshot Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 52 / 58
  53. 53. 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 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> Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 53 / 58
  54. 54. Q & A Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 54 / 58
  55. 55. 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 Chrome Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 55 / 58
  56. 56. Co teď? Hurá programovat! Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 56 / 58
  57. 57. Odkazy http://dev.opera.com/articles/view/ opera-extensions-quick-documentation-overview/ http://code.google.com/chrome/extensions/index.html beta dev trunk Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 57 / 58
  58. 58. To už je vše přátelé Děkujeme za pozornost Radek Šimko, Martin Štekl (FIT ČVUT) Chrome & Opera Extensions 16. března 2011 58 / 58

×