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

GTUG
Google Technical User Groups

GUG v České republice

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
...

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)
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

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

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 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 Pages

I. Browser action
Akce vyvolaná po kliknutí na ikonku v toolbaru
manifest.json
// ...
"browser_action": {
"default_icon": "images/icon19.png",
"default_title": "Google Mail",
},
// ...
(a) Popup (b) Action

II. Page action
manifest.json
// ...
"page_action": {
"default_icon": "icons/foo.png",
"default_title": "Do action",
}
// ...

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

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();
DEMO

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)

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);
});

Chrome APIs
1 Background page
2 Content script
3 Message passing
4 Cross-origin XHR
5 Bookmarks
6 Cookies
7 Tabs

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.

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 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({});
});

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, BookmarkTreeNode
bookmark) {...});

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, 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)

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

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

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",

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ý certiﬁkát => komunikace nemožná
Měření úspěchů pomocí Google Analytics
WebStore

Q & A

Opera Extensions

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

/conﬁg.xml
/index.html
/background.js
/popup.html
/icons/example.png
/options.html

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>

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);

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

Typy rozšíření
Injected script + index.html
Button + Popup
A bookmarklet extension
Content analysis
Content-aware action
Auto-action

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

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

Typy rozšíření
A bookmarklet extension
Pracuje se stránkou
Umožňuje měnit design a UI webu
Například: AdBlock+

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

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

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

Opera API
Background process
Browser Toolbar
Injected Scripts
Popup
Windows and Tabs
Messaging

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;

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

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();

Opera API
Popup
Jednoduché
ondisconnect;
onmessage;
Posílání zpráv
postMessage();

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();

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

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

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

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>

Q & A

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

Co teď?
Hurá programovat!

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

To už je vše přátelé
Děkujeme za pozornost

Chrome & Opera Extensions - GUG SPŠ Tábor

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Chrome & Opera Extensions - GUG SPŠ Tábor

Ähnlich wie Chrome & Opera Extensions - GUG SPŠ Tábor (20)

Chrome & Opera Extensions - GUG SPŠ Tábor