Rozszerzenia to spakowane pakiety plików HTML, CSS, JavaScript, obrazów i innych plików używanych w internecie które pozwalają dostosować sposób przeglądania Google Chrome. Rozszerzenia są tworzone w internecie i używać tych samych interfejsów API, które przeglądarka udostępnia w sieci.
Rozszerzenia mają wiele różnych możliwości funkcjonalnych. Mogą modyfikować treści internetowe widoczne dla użytkowników wchodzić w interakcje z przeglądarką, rozszerzać ją i zmieniać jej działanie.
Rozważ użycie rozszerzeń, dzięki którym przeglądarka Chrome stanie się najbardziej spersonalizowana.
Pliki rozszerzeń
Rozszerzenia różnią się pod względem typów plików i liczby katalogów, ale wszystkie muszą mieć [manifest][docs-manifest]. Podstawowe, ale przydatne rozszerzenia mogą składać się z samego pliku manifestu jej ikonę na pasku narzędzi.
Plik manifestu o nazwie manifest.json zawiera informacje o rozszerzeniu, takie jak:
oraz wskazać funkcje, z których rozszerzenie może korzystać.
{
"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ę na pasku narzędzi przeglądarki. Ikony na pasku narzędzi umożliwiają łatwy dostęp informując użytkowników o tym, które rozszerzenia są zainstalowane. Większość użytkowników będzie korzystać z rozszerzenia, które używa wyskakującego okienka, które można kliknąć.
To rozszerzenie Sprawdzanie poczty Google używa działania przeglądarki:
To rozszerzenie Mappy używa działania na stronie i treści skrypt:
Odwołania do plików
Do plików rozszerzenia można się odwoływać za pomocą względnego adresu URL, tak jak w zwykłym kodzie HTML. stronę.
<img src="images/my_image.png">
Dodatkowo dostęp do każdego pliku można uzyskać za pomocą bezwzględnego adresu URL.
chrome-extension://EXTENSION_ID/PATH_TO_FILE
W bezwzględnym adresie URL EXTENSION_ID to unikalny identyfikator, który system rozszerzeń dla każdego rozszerzenia. Identyfikatory wszystkich wczytanych rozszerzeń możesz wyświetlić, otwierając URL chrome://extensions. PATH_TO_FILE to lokalizacja pliku w pliku folder górny rozszerzenia; pasuje do względnego adresu URL.
Podczas pracy nad rozszerzeniem bez pakietu jego identyfikator może się zmieniać. Chodzi konkretnie o identyfikator
rozszerzenie bez pakietu zmieni się, jeśli zostanie wczytane z innego katalogu; identyfikator będzie
są zmieniane ponownie po umieszczeniu rozszerzenia w pakiecie. Jeśli kod rozszerzenia opiera się na bezwzględnym adresie URL,
może użyć metody chrome.runtime.getURL(), by uniknąć kodowania na stałe identyfikatora podczas
w Google Cloud.
Architektura
Architektura rozszerzenia zależy od jego funkcjonalności, ale wiele zaawansowanych rozszerzeń mają wiele komponentów:
Skrypt tła
Skrypt w tle to moduł obsługi zdarzeń rozszerzenia. zawiera detektory pod kątem zdarzeń przeglądarki, które są ważne dla rozszerzenia. Jest uśpiony do momentu wywołania zdarzenia, a potem wykonuje zaleconą logikę. Skuteczny skrypt działający w tle jest wczytywany tylko wtedy, gdy jest potrzebny. jest wyładowywany, gdy urządzenie jest nieaktywne.
Elementy interfejsu
Interfejs rozszerzenia powinien być prosty i ograniczony do minimum. Interfejs powinien dostosować lub aby ułatwić przeglądanie, nie rozpraszając ich. Większość rozszerzeń ma przeglądarkę action lub page action, ale mogą zawierać inne formy UI, takich jak menu kontekstowe, użycie omniboksu lub utworzenie skrót klawiszowy.
Strony interfejsu rozszerzeń, takie jak wyskakujące okienka, mogą zawierać zwykłe strony HTML z kodem JavaScript
logikę logiczną. Aby wyświetlić, rozszerzenia mogą też wywoływać metodę tabs.create lub window.open().
rozszerzenie zawiera dodatkowe pliki HTML.
Rozszerzenie, które korzysta z działania na stronie i wyskakującego okienka, może używać elementu deklaratywnego Content API, aby ustawić reguły w skrypcie działającym w tle, które będą działać, gdy wyskakujące okienko dostępnych dla użytkowników. Po spełnieniu warunków skrypt działający w tle komunikuje się z wyskakującym okienkiem. aby użytkownicy mogli ją kliknąć.
Skrypty treści
Rozszerzenia, które odczytują lub zapisują dane na stronach internetowych, korzystają ze skryptu treści. skrypt content zawiera kod JavaScript, który jest wykonywany w kontekście strony, która została wczytana do z przeglądarki. Skrypty treści odczytują i modyfikują DOM stron internetowych odwiedzanych przez przeglądarkę.
Skrypty treści mogą komunikować się z rozszerzeniem nadrzędnym przez wymianę wiadomości i przechowywanie wartości za pomocą interfejsu API storage.
Strona opcji
Dzięki rozszerzeniom użytkownicy mogą dostosowywać przeglądarkę Chrome, podobnie jak strona opcji. umożliwia dostosowanie rozszerzenia. Opcje pozwalają włączać funkcje i umożliwiać użytkownikom wybrać, która funkcjonalność odpowiada ich potrzebom.
Korzystanie z interfejsów API Chrome
Oprócz tego, że mają dostęp do tych samych interfejsów API, co strony internetowe, rozszerzenia mogą również używać
interfejsy API dla rozszerzeń, które zapewniają ścisłą integrację z przeglądarką. Rozszerzenia
strony internetowe mogą korzystać ze standardowej metody window.open() do otwierania adresu URL, ale rozszerzenia –
określ, w którym oknie ma być wyświetlany adres URL, używając interfejsu API Chrome
tabs.create.
Metody asynchroniczne i synchroniczne
Większość metod interfejsu API Chrome jest asynchronicznych: powracają natychmiast, bez oczekiwania na operację. aby zakończyć. Jeśli rozszerzenie musi znać wynik operacji asynchronicznej, może przekazać funkcji wywołania zwrotnego do metody. Wywołanie zwrotne jest wykonywane później, prawdopodobnie znacznie później, po .
Jeśli rozszerzenie musiało przejść do nowej karty z aktualnie wybranej przez użytkownika karty do nowego adresu URL, musi wykonać te czynności: pobierz identyfikator bieżącej karty, a następnie ustaw nowy URL na tej karcie.
Jeśli metoda tabs.query jest synchroniczna, może wyglądać mniej więcej tak:
//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. Urządzenie powraca bez czekania na pracę.
i nie zwraca żadnej wartości. Metoda jest asynchroniczna, gdy parametr wywołania zwrotnego to
dostępnych w podpisie.
// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)
Aby prawidłowe zapytanie dotyczące karty i aktualizowanie jej adresu URL były prawidłowe, 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 tej kolejności: 1, 4, 2. Funkcja wywołania zwrotnego
określone jako query() jest wywoływane i wykonuje wiersz 2, ale dopiero po informacjach na temat
dostępna jest obecnie wybrana karta. Dzieje się tak jakiś czas po powrocie aplikacji query(). Chociaż
Komponent update() jest asynchroniczny. Kod nie korzysta z parametru wywołania zwrotnego, bo rozszerzenie tego nie robi
na wynik aktualizacji.
// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()
Ta metoda synchronicznie zwraca adres URL jako metodę string i nie wykonuje żadnej innej operacji asynchronicznej.
Więcej szczegółów
Więcej informacji znajdziesz w dokumentacji interfejsu API Chrome i obejrzyj te materiały: film.
Komunikacja między stronami
Różne komponenty rozszerzenia często muszą się ze sobą komunikować. Różne strony HTML
mogą się odnaleźć za pomocą metod chrome.extension, takich jak getViews()
i getBackgroundPage(). Jeśli strona zawiera odwołanie do innych stron rozszerzeń, pierwsza z nich może
wywoływanie funkcji na innych stronach i manipulowanie ich DOM. Dodatkowo wszystkie komponenty
może uzyskać dostęp do wartości przechowywanych przy użyciu interfejsu API storage i komunikować się za pomocą:
przekazywanie wiadomości.
Zapisywanie danych i tryb incognito
Rozszerzenia mogą zapisywać dane za pomocą interfejsu API storage oraz Web Storage API lub wysyłanie żądań do serwera , które skutkują zapisywaniem danych. Gdy rozszerzenie musi coś zapisać. Najpierw zastanów się, czy nie pochodzi z okna incognito. Domyślnie rozszerzenia nie działają w oknach incognito.
Tryb incognito powoduje, że okno nie pozostawia żadnych śladów. W przypadku danych z: w oknach incognito, rozszerzenia powinny spełniać tę obietnicę. Jeśli rozszerzenie zwykle zapisuje przeglądanie historię, nie zapisuj historii z okien incognito. Rozszerzenia mogą jednak zapisywać ustawienia ustawienia w dowolnym oknie – incognito lub nie.
Aby wykryć, czy okno jest w trybie incognito, sprawdź właściwość incognito odpowiedniej
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 Pierwsze kroki możesz powinni być gotowi zacząć tworzyć własne rozszerzenia. Zanurz się głębiej w świat w Chrome z tymi zasobami.
- Więcej informacji o dostępnych opcjach debugowania rozszerzeń znajdziesz w sekcji Debugowanie .
- Rozszerzenia do Chrome mają dostęp do zaawansowanych interfejsów API wykraczających poza możliwości otwartego internetu. Chrome.* w dokumentacji interfejsów API.
- W sekcji Omówienie tworzenia rozszerzeń znajdziesz dziesiątki dodatkowych linków do sekcji: dokumentację dotyczącą tworzenia rozszerzeń zaawansowanych.