Przegląd architektury

Rozszerzenia to spakowane pakiety plików HTML, CSS, JavaScript, obrazów i innych plików używanych na platformie internetowej, które dostosowują przeglądanie w Google Chrome. Rozszerzenia są tworzone przy użyciu technologii internetowych i mogą korzystać z tych samych interfejsów API, które przeglądarka udostępnia w otwartej sieci.

Rozszerzenia mają szeroki zakres możliwości funkcjonalnych. Mogą modyfikować treści internetowe, które użytkownicy widzą i z którymi wchodzą w interakcję, a także rozszerzać i zmieniać zachowanie samej przeglądarki.

Rozszerzenia to sposób na to, aby przeglądarka Chrome stała się najbardziej spersonalizowaną przeglądarką.

Pliki rozszerzeń

Rozszerzenia różnią się typami plików i liczbą katalogów, ale wszystkie muszą mieć [plik manifestu][docs-manifest]. Niektóre podstawowe, ale przydatne rozszerzenia mogą składać się tylko z pliku manifestu i ikony na pasku narzędzi.

Plik manifestu o nazwie manifest.json zawiera informacje o rozszerzeniu, takie jak najważniejsze pliki i możliwości, z których może korzystać rozszerzenie.

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

Rozszerzenia muszą mieć ikonę, która znajduje się na pasku narzędzi przeglądarki. Ikony na pasku narzędzi ułatwiają dostęp i informują użytkowników o tym, które rozszerzenia są zainstalowane. Większość użytkowników będzie wchodzić w interakcję z rozszerzeniem, które używa wyskakującego okienka, klikając ikonę.

To rozszerzenie Google Mail Checker używa działania przeglądarki:

Zrzut ekranu rozszerzenia Google Mail Checker

To rozszerzenie Mappy używa działania strony i skryptu dotyczącego zawartości:

Zrzut ekranu rozszerzenia Mappy

Odwoływanie się do plików

Do plików rozszerzenia można się odwoływać za pomocą względnego adresu URL, tak jak do plików na zwykłej stronie HTML.

<img src="images/my_image.png">

Do każdego pliku można też uzyskać dostęp za pomocą bezwzględnego adresu URL.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

W bezwzględnym adresie URL EXTENSION_ID to unikalny identyfikator generowany przez system rozszerzeń dla każdego rozszerzenia. Identyfikatory wszystkich wczytanych rozszerzeń można wyświetlić, otwierając adres URL chrome://extensions. PATH_TO_FILE to lokalizacja pliku w folderze najwyższego poziomu rozszerzenia . Odpowiada ona względnemu adresowi URL.

Podczas pracy nad rozpakowanym rozszerzeniem jego identyfikator może się zmienić. W szczególności identyfikator rozpakowanego rozszerzenia zmieni się, jeśli rozszerzenie zostanie wczytane z innego katalogu. Identyfikator zmieni się ponownie, gdy rozszerzenie zostanie spakowane. Jeśli kod rozszerzenia opiera się na bezwzględnym adresie URL, może użyć metody chrome.runtime.getURL(), aby uniknąć zakodowania identyfikatora na stałe podczas programowania.

Architektura

Architektura rozszerzenia zależy od jego funkcjonalności, ale wiele rozbudowanych rozszerzeń będzie zawierać kilka komponentów:

Skrypt działający w tle

Skrypt działający w tle to procedura obsługi zdarzeń rozszerzenia. Zawiera on detektory zdarzeń przeglądarki, które są ważne dla rozszerzenia. Skrypt pozostaje w stanie uśpienia, dopóki nie zostanie wywołane zdarzenie, a następnie wykonuje instrukcje logiczne. Skuteczny skrypt działający w tle jest wczytywany tylko wtedy, gdy jest potrzebny, i zwalniany, gdy przechodzi w stan bezczynności.

Elementy interfejsu

Interfejs użytkownika rozszerzenia powinien być celowy i minimalistyczny. Interfejs powinien dostosowywać lub ulepszać przeglądanie, nie rozpraszając przy tym uwagi. Większość rozszerzeń ma działanie przeglądarki lub działanie strony, ale może zawierać inne formy interfejsu, takie jak menu kontekstowe, używanie paska adresu lub tworzenie skrótu klawiszowego.

Strony interfejsu rozszerzenia, takie jak wyskakujące okienko, mogą zawierać zwykłe strony HTML z logiką JavaScript. Rozszerzenia mogą też wywoływać funkcje tabs.create lub window.open(), aby wyświetlać dodatkowe pliki HTML znajdujące się w rozszerzeniu.

Rozszerzenie używające działania strony i wyskakującego okienka może używać deklaratywnego interfejsu Content API do ustawiania reguł w skrypcie działającym w tle, które określają, kiedy wyskakujące okienko jest dostępne dla użytkowników. Gdy warunki zostaną spełnione, skrypt działający w tle komunikuje się z wyskakującym okienkiem, aby ikona była klikalna dla użytkowników.

Okno przeglądarki zawierające czynność dotyczącą strony, która wyświetla wyskakujące okienko

Skrypty dotyczące zawartości

Rozszerzenia, które odczytują lub zapisują dane na stronach internetowych, używają skryptu dotyczącego zawartości. Skrypt dotyczący zawartości zawiera kod JavaScript, który jest wykonywany w kontekście strony wczytanej do przeglądarki. Skrypty dotyczące zawartości odczytują i modyfikują DOM stron internetowych odwiedzanych przez przeglądarkę.

Okno przeglądarki z działaniem strony i skryptem treści

Skrypty dotyczące zawartości mogą komunikować się z rozszerzeniem nadrzędnym, wymieniając wiadomości i przechowując wartości za pomocą interfejsu Storage API.

Pokazuje ścieżkę komunikacji między skryptem treści a rozszerzeniem nadrzędnym.

Strona opcji

Tak jak rozszerzenia pozwalają użytkownikom dostosować przeglądarkę Chrome, strona opcji umożliwia dostosowanie rozszerzenia. Opcje można wykorzystać do włączania funkcji i umożliwiania użytkownikom wybierania funkcjonalności, która jest dla nich istotna.

Korzystanie z interfejsów Chrome API

Oprócz dostępu do tych samych interfejsów API co strony internetowe rozszerzenia mogą też używać interfejsów API specyficznych dla rozszerzeń, które zapewniają ścisłą integrację z przeglądarką. Rozszerzenia i strony internetowe mogą używać standardowej metody window.open() do otwierania adresu URL, ale rozszerzenia mogą określić, w którym oknie ma być wyświetlany ten adres URL, używając zamiast tego metody tabs.create interfejsu Chrome API.

Metody asynchroniczne i synchroniczne

Większość metod interfejsu Chrome API jest asynchroniczna: zwracają one wartość natychmiast, nie czekając na zakończenie operacji. Jeśli rozszerzenie musi znać wynik operacji asynchronicznej, może przekazać do metody funkcję wywołania zwrotnego. Wywołanie zwrotne jest wykonywane później, być może znacznie później, po powrocie metody.

Jeśli rozszerzenie musi przejść do nowej strony URL na karcie aktualnie wybranej przez użytkownika, musi pobrać identyfikator bieżącej karty, a następnie zaktualizować adres tej karty na nowy adres URL.

Jeśli metoda tabs.query była synchroniczna, mogłaby wyglądać tak jak poniżej.

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

To podejście nie zadziała, ponieważ query() jest asynchroniczne. Zwraca wartość bez czekania na zakończenie pracy i nie zwraca wartości. Metoda jest asynchroniczna, gdy w jej sygnaturze dostępny jest parametr wywołania zwrotnego.

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

Aby prawidłowo wysłać zapytanie o kartę i zaktualizować jej adres URL, rozszerzenie musi użyć parametru wywołania zwrotnego.

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

W powyższym kodzie wiersze są wykonywane w tej kolejności: 1, 4, 2. Funkcja wywołania zwrotnego określona dla query() jest wywoływana, a następnie wykonywany jest wiersz 2, ale dopiero po uzyskaniu informacji o aktualnie wybranej karcie. Dzieje się to jakiś czas po powrocie query(). Chociaż update() jest asynchroniczne, kod nie używa parametru wywołania zwrotnego, ponieważ rozszerzenie nie robi nic z wynikami aktualizacji.

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

Ta metoda synchronicznie zwraca adres URL jako string i nie wykonuje żadnych innych asynchronicznych działań.

Więcej szczegółów

Więcej informacji znajdziesz w dokumentacji interfejsu Chrome API i w tym filmie.

Komunikacja między stronami

Różne komponenty rozszerzenia często muszą się ze sobą komunikować. Różne strony HTML mogą się odnajdywać za pomocą metod chrome.extension, takich jak getViews() i getBackgroundPage(). Gdy strona ma odniesienie do innych stron rozszerzenia, może wywoływać funkcje na innych stronach i manipulować ich DOM. Dodatkowo wszystkie komponenty rozszerzenia mogą uzyskiwać dostęp do wartości przechowywanych za pomocą interfejsu Storage API i komunikować się za pomocą przekazywania wiadomości.

Zapisywanie danych i tryb incognito

Rozszerzenia mogą zapisywać dane za pomocą interfejsu Storage API, interfejsu HTML5 Web Storage API lub przez wysyłanie żądań do serwera , które powodują zapisanie danych. Gdy rozszerzenie musi coś zapisać, najpierw sprawdź, czy pochodzi to z okna incognito. Domyślnie rozszerzenia nie działają w oknach incognito.

Tryb incognito gwarantuje, że okno nie pozostawi żadnych śladów. W przypadku danych z okien incognito rozszerzenia powinny dotrzymywać tej obietnicy. Jeśli rozszerzenie zwykle zapisuje historię przeglądania, nie zapisuj historii z okien incognito. Rozszerzenia mogą jednak przechowywać ustawienia preferencji z dowolnego okna, w tym z okna incognito.

Aby sprawdzić, czy okno jest w trybie incognito, sprawdź właściwość incognito odpowiedniego obiektu tabs.Tab lub windows.Window.

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

Kolejny krok

Po przeczytaniu omówienia i ukończeniu samouczka dla początkujących, deweloperzy powinni być gotowi do pisania własnych rozszerzeń. Poznaj świat niestandardowych ustawień Chrome dzięki tym materiałom.

  • Więcej informacji o opcjach dostępnych do debugowania rozszerzeń znajdziesz w samouczku dotyczącym debugowania.
  • Rozszerzenia Chrome mają dostęp do zaawansowanych interfejsów API, które wykraczają poza to, co jest dostępne w otwartej sieci. Dokumentacja interfejsów API chrome.* Dokumentacja interfejsów API omawia każdy interfejs API.
  • Omówienie tworzenia rozszerzeń zawiera dziesiątki dodatkowych linków do dokumentacji dotyczącej zaawansowanego tworzenia rozszerzeń.