Było całkiem miło, ale zdarzały się nudniejsze wykłady...
Na jednym z nich, poświęconym Self-Healing Systems zakodziłem sobie małe "narzędzie".
Wygląda tak:
Środek to Trello, ale "obudowa" jest moja ;-)
To prosta Aplikacja Chrome.
Jak powstała?
Najpierw trzeba było stworzyć manifest, czyli plik manifest.json.
{
"name": "Trello display",
"description": "Trello display",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions": [
"https://trello.com/","webview","storage"
]
}W tym pliku opisujemy naszą aplikację.
Najważniejsze to to co widać w "app" i "permissions".
"manifest_version" jest konieczne ;-)
Co do reszty nie mam zdania.
W "app" opisujemy skrypty, które będą służyły do uruchomienia naszej aplikacji.
"background" w "app" wskazuje skrypt, który będzie uruchamiany wraz z naszą aplikacją.
Tu warto poczytać o samych aplikacjach i rozszerzeniach dla Chrome.
Nasz background.js wygląda tak:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('wrapper.html', {
'bounds': {
'width': 1200,
'height': 480
}
});
});Każemy tutaj Chrome by w reakcji na uruchomienie aplikacji (w listenerze dla zdarzenia onLaunch) Chrome otwarło okienko z plikiem wrapper.html o rozmiarach 1200 na 480 pikseli.
wrapper.html to UI naszej "aplikacji".
<html>
<body>
<webview id="webview" style="width: 100%; height: 100%;" src="data:text/html, <html><h1>Loading...</h1></html>" partition="persist:przemelekTrelloApp"></webview>
<script src="wrapper.js">
</script≶
</body>
</html>
Tu najważniejsze to tag "webview".
Osadza on na stronie nową przeglądarkę (z własnymi ciasteczkami, które będą teoretycznie trzymane w oddzielnym "magazynie" w naszym Chrome, który tutaj zowie się "persist:przemelekTrelloApp"), która jest odizolowana od skryptu. Dzięki temu nawet jeśli autor strony zablokował jej umieszczanie w ramce to możliwe jest osadzenie takiej strony w naszej.... z tym, że nie mamy takich możliwości jak z ramką.
To by było prawie wszystko, ale tutaj zamiast załadowania Trello mielibyśmy tylko napis Loading... ;-)
Można by było tam po prostu wstawić https://trello.com, ale przy każdym uruchomieniu aplikacji lądowalibyśmy na stronie logowania... Po co?
Żeby pamiętać ostatni adres na którym byliśmy mamy skrypt w wrapper.js
chrome.storage.local.get(function(items) {
var url = items["url"];
if (!url) url="https://trello.com";
console.log(url);
webview.src=url;
console.log("toster");
console.log(webview.src);
});
webview.addEventListener('loadcommit', function(event) {
var url = event.url;
chrome.storage.local.set({url:url});
});
Rejestrujemy się na zdarzenie "loadcommit", które występuje zawsze po tym jak zawartość strony (bez obrazków i innych podobnych) została załadowana, czyli wtedy gdy adres strony jest już znany. Pobieramy url ze zdarzenia i wrzucamy je do lokalnego storage'a (coś podobnego do localStorage, z tym że apki Chrome nie mają prawa dostępu do localStorage).
Dodatkowo w momencie uruchamiania skryptu próbujemy odczytać to co jest zapisane w lokalnym storage'u. Jeśli jest tam coś pod właściwością url to wstawiamy to jako src do webview i już wszystko działa :-)
I to by było na tyle ;-)
Źródła są na GitHub'ie.
Jakby to kogoś interesowało i chciałby użyć to można pobrać, po zapisaniu na dysku idziemy do strony z Rozszerzeniami (menu hamburger w prawym górnym rogu Chrome -> Więcej narzędzi (aka More Tools) -> Rozszerzenia (Extensions) i przeciągamy pobrany plik do rozszerzeń. Chrome powinien go zainstalować)
Podobne postybeta
Robimy widget do Windows 7 :-)
Jak "okradłem" Google Readera ;-)
Chrome2ChromeV2 na GitHub :-)
"Kodowanie" na Chrome OS ;-)
Trudniej jest lepiej.... czyli AccountManager w Androidzie...
Brak komentarzy:
Prześlij komentarz