pierwsze kroki

rozszerzenia składają się z różnych, ale spójnych komponentów. Komponenty mogą zawierać skrypty w tle, Skrypty zawartości, stronę opcji, elementy interfejsu użytkownika i różne pliki logiczne. Komponenty rozszerzeń są tworzone przy użyciu technologii tworzenia stron internetowych: HTML, CSS i JavaScript. Komponenty rozszerzenia zależą od jego funkcjonalności i mogą nie wymagać każdej opcji.,

Ten samouczek zbuduje rozszerzenie, które pozwala użytkownikowi zmienić kolor tła dowolnej strony na developer.chrome.com. użyje wielu podstawowych komponentów, aby dać wstępną demonstrację ich relacji.

aby rozpocząć, utwórz nowy katalog do przechowywania plików rozszerzeń.

ukończone rozszerzenie można pobrać tutaj.

Utwórz manifest #

rozszerzenia zaczynają się od manifestu. Utwórz plik o nazwie manifest.json I DOŁĄCZ poniższy kod lub Pobierz Plik tutaj.,

katalog zawierający plik manifestu może być dodany jako rozszerzenie w trybie deweloperskim w jego aktualnym stanie.

1. Otwórz stronę zarządzania rozszerzeniami, przechodząc do chrome://extensions.
   • stronę zarządzania rozszerzeniami można również otworzyć, klikając menu Chrome, najeżdżając kursorem na Więcej narzędzi, a następnie wybierając rozszerzenia.
2. Włącz tryb programisty, klikając przełącznik obok trybu programisty.
3. kliknij przycisk Załaduj rozpakowany i wybierz katalog rozszerzenia.

Ta-da!, Rozszerzenie zostało pomyślnie zainstalowane. Ponieważ w manifeście nie było ikon, dla rozszerzenia zostanie utworzona ogólna ikona paska narzędzi.

Dodaj instrukcję #

chociaż rozszerzenie zostało zainstalowane, nie posiada ono instrukcji. Wprowadź skrypt w tle, tworząc plik o nazwie background.js lub pobierając go tutaj i umieszczając w katalogu rozszerzenia.

Skrypty tła i wiele innych ważnych komponentów muszą być zarejestrowane w manifeście., Rejestracja skryptu w tle w manifeście informuje rozszerzenie, do którego Pliku się odwoływać i jak ten plik powinien się zachowywać.

Rozszerzenie jest teraz świadome, że zawiera nietrwały skrypt w tle i skanuje zarejestrowany plik w poszukiwaniu ważnych zdarzeń, których musi słuchać.

To rozszerzenie będzie wymagało informacji od stałej zmiennej zaraz po jej zainstalowaniu. Zacznij od włączenia zdarzenia nasłuchu dla runtime.onInstalled w skrypcie w tle. Wewnątrz słuchaczaonInstalled rozszerzenie ustawia wartość za pomocą API pamięci masowej., Pozwoli to wielu składnikom rozszerzeń uzyskać dostęp do tej wartości i ją zaktualizować.

Większość interfejsów API, w tym API pamięci masowej, musi być zarejestrowana w polu"permissions" w manifeście, aby rozszerzenie mogło z nich korzystać.

Przejdź z powrotem do strony zarządzania rozszerzeniami i kliknij łącze Przeładuj. Nowe pole, Inspect views, staje się dostępne z Niebieskim łączem, strona tła.,

kliknij link, aby wyświetlić skrypt w tle”s console log „The color is green.„

wprowadzenie interfejsu użytkownika #

rozszerzenia mogą mieć wiele form interfejsu użytkownika, ale ten będzie używał wyskakującego okienka. Utwórz i dodaj plik popup.html do katalogu lub pobierz go tutaj. To rozszerzenie używa przycisku do zmiany koloru tła.

podobnie jak skrypt w tle, ten plik musi być oznaczony jako wyskakujące okienko w manifeście pod page_action.,

oznaczenie ikon paska narzędzi znajduje się również w polupage_action w poludefault_icons. Pobierz folder obrazów tutaj, rozpakuj go i umieść w katalogu rozszerzenia. Zaktualizuj manifest, aby rozszerzenie wiedziało, jak korzystać z obrazów.

rozszerzenia wyświetlają również obrazy na stronie Zarządzanie rozszerzeniami, ostrzeżenie o uprawnieniach i favicon. Obrazy te są oznaczone w manifeście pod icons.,

Jeśli rozszerzenie zostanie przeładowane na tym etapie, będzie zawierało ikonę w skali szarości, ale nie będzie zawierało żadnych różnic w funkcjonalności. Ponieważ page_action jest zadeklarowana w manifeście, to rozszerzenie informuje przeglądarkę, kiedy użytkownik może wchodzić w interakcje z popup.html.

Dodaj zadeklarowane reguły do skryptu tła za pomocądeclarativeContent API w ramach zdarzeniaruntime.onInstalled listener.

Rozszerzenie będzie wymagało uprawnień, aby uzyskać dostęp do APIdeclarativeContent w swoim manifeście.,

przeglądarka wyświetli teraz pełnokolorową ikonę akcji strony na pasku narzędzi przeglądarki, gdy użytkownicy przejdą do adresu URL zawierającego "developer.chrome.com". Gdy ikona jest pełnokolorowa, użytkownicy mogą ją kliknąć, aby wyświetlić wyskakujące okienko.html.

ostatnim krokiem dla wyskakującego interfejsu jest dodanie koloru do przycisku. Utwórz i dodaj plik o nazwie https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js z następującym kodem do katalogu rozszerzenia lub pobrany tutaj.

Ten kod chwyta przycisk zpopup.html I żąda wartości koloru z magazynu., Następnie stosuje Kolor jako tło przycisku. Dołącz znacznik skryptu do https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js w popup.html.

Przeładuj rozszerzenie, aby wyświetlić zielony przycisk.

Layer logic #

Rozszerzenie wie, że wyskakujące okienko powinno być dostępne dla użytkowników na developer.chrome.com i wyświetla kolorowy przycisk, ale wymaga logiki do dalszej interakcji użytkownika. Zaktualizuj https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js, aby dołączyć następujący kod.,

zaktualizowany kod dodaje Zdarzenie onclick na przycisku, które uruchamia programowo wstrzykiwany skrypt zawartości. Spowoduje to zmianę koloru tła strony na ten sam kolor co przycisk. Korzystanie z programmatic injection pozwala na wywoływanie przez użytkownika skryptów treści, zamiast automatycznego wstawiania niechcianego kodu na strony internetowe.

manifest będzie potrzebował uprawnienia activeTab, aby zezwolić na tymczasowy dostęp rozszerzenia do tabs API. Umożliwia to rozszerzenie wywołanie tabs.executeScript.,

Rozszerzenie jest teraz w pełni funkcjonalne! Przeładuj rozszerzenie, odśwież tę stronę, otwórz wyskakujące okienko i kliknij przycisk, aby zmienić go na zielony! Jednak niektórzy użytkownicy mogą chcieć zmienić tło na inny kolor.

daj użytkownikom opcje #

Rozszerzenie obecnie pozwala tylko użytkownikom zmienić tło na zielone. Włączenie strony opcji daje użytkownikom większą kontrolę nad funkcjonalnością rozszerzenia, dodatkowo dostosowując ich przeglądanie.,

zacznij od utworzenia pliku w katalogu o nazwie options.html I DOŁĄCZ poniższy kod, lub pobierz go tutaj.

następnie zarejestruj stronę opcji w manifeście,

Przeładuj rozszerzenie i kliknij szczegóły.

przewiń stronę szczegółów i wybierz Opcje rozszerzenia, aby wyświetlić stronę opcji, chociaż będzie ona obecnie wyświetlana pusta.

ostatnim krokiem jest dodanie logiki opcji., Utwórz plik o nazwie options.js w katalogu rozszerzenia z następującym kodem lub pobierz go tutaj.

Cztery opcje kolorów są następnie generowane jako przyciski na stronie opcji ze słuchaczami zdarzeń onclick. Gdy użytkownik kliknie przycisk, aktualizuje wartość koloru w globalnej pamięci rozszerzenia. Ponieważ wszystkie pliki rozszerzenia pobierają informacje o kolorze z magazynu globalnego, inne wartości nie muszą być aktualizowane.

Gratulacje! Katalog zawiera teraz w pełni funkcjonalne, choć uproszczone rozszerzenie Chrome.

Co dalej?,

• przegląd rozszerzeń Chrome trochę kopie zapasowe i wypełnia wiele szczegółów na temat architektury rozszerzeń w ogóle, a niektóre konkretne koncepcje programiści będą chcieli się z nimi zapoznać.
• dowiedz się więcej o opcjach dostępnych dla debugowania rozszerzeń w samouczku debugowania.
• rozszerzenia Chrome mają dostęp do potężnych interfejsów API ponad to, co jest dostępne w otwartej sieci. Chrom.* Dokumentacja API będzie przechodzić przez każde API.
• poradnik programisty zawiera dziesiątki dodatkowych linków do dokumentacji związanej z zaawansowanym tworzeniem rozszerzeń.,

---