Mozilla Labs jest w trakcie opracowywania projektu o nazwie Jetpack. Jetpack jest rozszerzeniem dla Firefoksa, które znacznie ułatwia proces tworzenia własnych dodatków do przeglądarki z użyciem wyłącznie zwykłego HTMLa, CSS i JavaScriptu. Możemy zapomnieć na chwilę o XUL, XPCOM i innych technologiach. Założeniem projektu jest, że jeśli potrafisz tworzyć strony WWW, potrafisz napisać swój dodatek do Firefoksa.

Razem z rozszerzeniem przygotowano kilka przykładów działania, m.in. skrypt usuwający reklamy z odwiedzanych stron oraz skrypt sprawdzający nowe wiadomości w GMailu.

Obydwa skrypty mają tę przewagę nad tradycyjnymi rozszerzeniami, że można je zainstalować i wyłączyć bez ponownego uruchomienia przeglądarki. Ponadto, wystarczy zaledwie kilka linii kodu, żeby całość poprawnie działała.

API

Rozszerzenie udostępnia programistom prosty interfejs programistyczny, za pomocą którego można tworzyć swoje dodatki. Niestety, API nie posiada jeszcze kompletnej dokumentacji. Zapewne wynika to ze wczesnego etapu rozwoju projektu.

Ze szczątkowych informacji można wyczytać, że Jetpack integruje ze sobą bibliotekę jQuery, z której można korzystać w procesie budowania swoich dodatków. Oprócz jQuery mamy do dyspozycji funkcje setInterval, setTimeout, clearInterval oraz clearTimeout.

Jeśli dysponujemy rozszerzeniem Firebug, możemy debugować swoje dodatki logując błędy i komunikaty w konsoli za pomocą funkcji console.log, console.info, console.warn oraz console.error.

Z kolei funkcje z przestrzeni jetpack.tabs oraz jetpack.statusBar oferują dostęp do kart oraz paska stanu przeglądarki.

Karty

jetpack.tabs jest kolekcją wszystkich otwartych kart. Żeby - przykładowo - odczytać adres aktualnie aktywnej karty wystarczy wykonać polecenie

console.log(jetpack.tabs.focused.url);

Aby otworzyć nową kartę wykonujemy polecenie

jetpack.tabs.open("http://blog.kukawski.pl");

Kolekcja jetpack.tabs udostępnia także funkcję onReady, z użyciem której rejestrujemy funkcje wykonywane w momencie załadowania się dokumentu w dowolnej karcie.

jetpack.tabs.onReady(function(doc){
	console.log("Dokument o adresie "+doc.location.href+" został wczytany");
});

Pasek stanu

Poprzez jetpack.statusBar możemy dodawać swoje dodatki do paska stanu przeglądarki. Przykładowy kod realizujący zadanie prezentuje się następująco:

jetpack.statusBar.append({
	html:'<img src="http://blog.kukawski.pl/favicon.ico" alt=&quo;favicon">',
	width:16,
});

Powyższy kod wstawi do paska stanu grafikę w postaci favikony mojego bloga. Rozmiary dodatku ograniczamy do 16 pikseli. Wygląda na to, że można ustawiać tylko szerokość. Wysokość dodatku ograniczona jest wysokością paska stanu.

Poniżej bardziej rozbudowany przykład.

jetpack.statusBar.append({
  html: '<small style="font-family: sans-serif; cursor: pointer;"><img src="http://blog.kukawski.pl/files/favicon.ico" style="vertical-align: middle"> <span style="vertical-align: middle">rafael\'s.blog</span></small>',
	width: 105,
	onReady: function(widget){
		$(widget).click(function(){
			jetpack.tabs.open('http://blog.kukawski.pl/');
			jetpack.tabs[jetpack.tabs.length - 1].focus();
		});
	}
});

który prezentuje się w przeglądarce w następujący sposób:

Zamiast kodu HTML można do paska stanu wstawić zawartość podanego URLa - nawet całą stronę, ale nie ma to większego sensu ze względu na małą przestrzeń użytkową.

jetpack.statusBar.append({
	url:'http://google.pl',
});

Powiadomienia

Funkcje zawarte w jetpack.notifications będą służyły do wyświetlania użytkownikowi komunikatów i powiadomień. Na chwilę obecną dostępna jest funkcje show, za pomocą której można wyświetlić proste powiadomienie.

jetpack.notifications.show({
	title: "rafael's.blog",
	body: 'Hello World!',
	icon: 'http://blog.kukawski.pl/files/favicon.ico'
});

Wykonanie powyższego kodu będzie skutkować pojawieniem się niżej przedstawionego komunikatu.

Twitter

Rozszerzenie integruje też w sobie API serwisu Twitter. W przyszłości zintegrowana zostanie obsługa większej liczby popularnych serwisów.

Na chwilę obecną dokumentacji obsługi Twittera nie została napisana, więc pozostaje tylko przeglądać kod źródłowy rozszerzenia. W każdym bądź razie, cała funkcjonalność Twittera dostępna jest w kolekcji jetpack.lib.twitter.

Zarządzanie dodatkami i integracja dodatków ze stroną

Wszystkimi zainstalowanymi dodatkami można zarządzać z poziomu strony about:jetpack. Poszczególne rozszerzenia można usuwać, podglądać ich źródło oraz debugować.

Każda strona może zaoferować swój Jetpack do zainstalowania. Gdy przeglądarka napotka w kodzie strony na znacznik

<link rel="jetpack" href="skrypt.js">

wyświetli pasek informacyjny, że dana strona zawiera własne rozszerzenia, które można zainstalować.

Ze względów bezpieczeństwa, jeśli dodatek będzie pochodził z niezaufanej strony, należy potwierdzić, że jesteśmy świadomi konsekwencji instalacji tego dodatku.

Podsumowanie

Podsumowując, rozszerzenie zapowiada się bardzo ciekawie i jestem pewien, że znajdzie zastosowanie w wielu usługach sieciowych. Co najważniejsze, projekt jest otwarty i każdy może mieć swój udział w jego rozwoju.

Zachęcam do przeglądania strony projektu, wpisu na blogu Mozilla Labs oraz galerii przykładowych rozwiązań.