Omówienie architektury

Rozszerzenia to spakowane pakiety plików HTML, CSS, JavaScript, obrazów i innych plików używanych na platformie internetowej, które pozwalają dostosować działanie przeglądarki Google Chrome. Rozszerzenia są tworzone za pomocą technologii internetowej i mogą korzystać z tych samych interfejsów API, które przeglądarka udostępnia w otwartej sieci.

Rozszerzenia mają szeroki zakres funkcji. Mogą modyfikować treści internetowe, które widzą użytkownicy, wchodzić z nimi w interakcję lub rozszerzać ich działanie, a także zmieniać działanie przeglądarki.

Rozważ użycie rozszerzeń, dzięki którym przeglądarka Chrome będzie najbardziej spersonalizowana.

Pliki rozszerzeń

Rozszerzenia mogą mieć różne typy plików i liczbę katalogów, ale wszystkie muszą zawierać [manifest][docs-manifest]. Podstawowe, ale przydatne rozszerzenia mogą składać się z pliku manifestu i ikony na pasku narzędzi.

Plik manifestu o nazwie manifest.json zawiera informacje o rozszerzeniu dla przeglądarki, w tym 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ę znajdującą się na pasku narzędzi przeglądarki. Ikony na pasku narzędzi ułatwiają dostęp do rozszerzenia i informują użytkowników o tym, które rozszerzenia są zainstalowane. Większość użytkowników wchodzi w interakcję z rozszerzeniem za pomocą wyskakującego okienka, klikając ikonę.

To rozszerzenie Sprawdzanie poczty Google używa działania przeglądarki:

Zrzut ekranu pokazujący rozszerzenie Sprawdzanie poczty Google

To rozszerzenie Mappy korzysta z działania na stronie i skryptu zawartości:

Zrzut ekranu pokazujący rozszerzenie Mappy

Odniesienia do plików

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

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

Dostęp do każdego pliku można też uzyskać 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żesz wyświetlić na stronie chrome://extensions. PATH_TO_FILE to lokalizacja pliku w głównym folderze rozszerzenia. Odpowiada względnemu adresowi URL.

Identyfikator rozszerzenia może się zmieniać podczas pracy nad rozszerzeniem. W szczególności identyfikator rozszerzenia bez pakietu zmieni się, jeśli zostanie ono wczytane z innego katalogu. Identyfikator zmieni się ponownie po spakowaniu rozszerzenia. Jeśli kod rozszerzenia korzysta z bezwzględnego adresu URL, może użyć metody chrome.runtime.getURL(), aby uniknąć kodowania na stałe identyfikatora na etapie programowania.

Architektura

Architektura rozszerzenia zależy od jego funkcjonalności, ale wiele zaawansowanych rozszerzeń zawiera wiele komponentów:

Skrypt w tle

Skrypt w tle to moduł obsługi zdarzeń rozszerzenia. Zawiera detektory zdarzeń w przeglądarce, które są ważne dla rozszerzenia. Zatrzymuje się w stanie uśpionym, dopóki nie zostanie wywołane zdarzenie, a następnie działa zgodnie z instrukcjami. Efektywny skrypt działający w tle jest wczytywany tylko wtedy, gdy jest potrzebny, i wyładowywany, gdy jest nieaktywny.

Elementy interfejsu

Interfejs rozszerzenia powinien być celowy i minimalny. Interfejs powinien dostosować lub ulepszyć przeglądanie, nie rozpraszając użytkownika. Większość rozszerzeń obsługuje działanie przeglądarki lub działanie na stronie, ale może też obejmować inne elementy interfejsu, takie jak menu kontekstowe, korzystanie z omniboksu czy tworzenie skrótu klawiszowego.

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

Rozszerzenie używające działania na stronie i wyskakującego okienka może wykorzystać interfejs deklaratywnej treści API do ustawienia w skrypcie działającym w tle reguł dotyczących pojawiania się wyskakującego okienka. Po spełnieniu warunków skrypt w tle komunikuje się z wyskakującym okienkiem, aby użytkownik mógł kliknąć ikonę.

Okno przeglądarki zawierające działanie na stronie wyświetlające wyskakujące okienko

Skrypty treści

Rozszerzenia, które odczytują lub zapisują treści na stronach internetowych, korzystają ze skryptu treści. Skrypt treści zawiera kod JavaScript, który wykonywany jest na stronach wczytanych w przeglądarce. Skrypty treści odczytują i modyfikują DOM stron internetowych odwiedzanych przez przeglądarkę.

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

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

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

Strona opcji

Rozszerzenia umożliwiają użytkownikom dostosowywanie przeglądarki Chrome, a strona opcji umożliwia dostosowanie rozszerzenia. Opcje pozwalają włączyć funkcje i umożliwić użytkownikom wybór funkcji, które odpowiadają ich potrzebom.

Korzystanie z interfejsów API Chrome

Oprócz dostępu do tych samych interfejsów API co strony internetowe rozszerzenia mogą też korzystać z odpowiednich dla nich interfejsów API, które zapewniają ścisłą integrację z przeglądarką. Rozszerzenia i strony internetowe mogą otwierać adresy URL zarówno za pomocą standardowej metody window.open(), jak i metody tabs.create interfejsu API Chrome, ale rozszerzenia pozwalają określić okno, w którym ten adres mają się wyświetlać.

Metody asynchroniczne i synchroniczne

Większość metod interfejsu API Chrome jest asynchroniczna: zwracają się natychmiast, bez oczekiwania 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, potencjalnie dużo później, po zwróceniu metody.

Jeśli rozszerzenie musiało przejść do obecnie wybranej karty przez użytkownika pod nowy adres URL, trzeba było pobrać identyfikator bieżącej karty i zaktualizować adres tej karty na nowy adres URL.

Jeśli metoda tabs.query jest synchroniczna, może wyglądać podobnie do tej poniżej.

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

Ta metoda się nie uda, ponieważ interfejs query() jest asynchroniczny. Zwraca on wartość bez oczekiwania na zakończenie zadania i nie zwraca żadnej wartości. Metoda jest asynchroniczna, gdy w sygnaturze dostępny jest parametr wywołania zwrotnego.

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

Aby przesłać zapytanie do karty i zaktualizować jej adres URL, rozszerzenie musi używać 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 takiej kolejności: 1, 4, 2. Funkcja wywołania zwrotnego określona jako query() jest wywoływana, a następnie wykonywana wiersz 2, ale dopiero wtedy, gdy dostępne są informacje o aktualnie wybranej karcie. Dzieje się tak jakiś czas po tym, jak query() wraca. Mimo że update() jest asynchroniczny, kod nie używa parametru wywołania zwrotnego, ponieważ nie ma ono wpływu na wyniki 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 innych działań asynchronicznych.

Więcej szczegółów

Aby dowiedzieć się więcej, przejrzyj dokumenty referencyjne interfejsu Chrome API i obejrzyj ten film.

Komunikacja między stronami

Różne komponenty rozszerzeń często muszą ze sobą komunikować. Różne strony HTML mogą się znajdować za pomocą metod chrome.extension, takich jak getViews() czy getBackgroundPage(). Gdy strona odwołuje się do innych stron rozszerzeń, pierwsza z nich może wywoływać funkcje na innych stronach i manipulować ich modelami DOM. Dodatkowo wszystkie komponenty rozszerzenia mają dostęp do wartości przechowywanych przez interfejs storage API i komunikują się za pomocą przekazywania wiadomości.

Zapisywanie danych i tryb incognito

Rozszerzenia mogą zapisywać dane za pomocą interfejsu storage API lub interfejsu Web Storage API w języku HTML5, a także przez wysyłanie żądań do serwera , które powodują zapisywanie danych. Gdy rozszerzenie musi coś zapisać, najpierw zastanów się, czy pochodzi ono z okna incognito. Domyślnie rozszerzenia nie działają w oknach incognito.

Tryb incognito obiecuje, że w oknie nie pozostaną żadne ślady. W przypadku danych z okna incognito rozszerzenia powinny brać to pod uwagę. Jeśli rozszerzenie zwykle zapisuje historię przeglądania, nie zapisuj historii z okna incognito. Rozszerzenia mogą jednak zapisywać ustawienia w dowolnym oknie – zarówno w trybie incognito, jak i innego.

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 zapoznaniu się z omówieniem i ukończeniu samouczka Pierwsze kroki programiści powinni być gotowi do rozpoczęcia tworzenia własnych rozszerzeń. Dowiedz się więcej o własnej wersji Chrome, korzystając z poniższych materiałów.