Jak napisać rozszerzenie do Chrome: przewodnik krok po kroku z przykładowym kodem

Opublikowany: 2022-04-10

Rozszerzenia przeglądarki mogą być świetnym sposobem na dobre wykorzystanie umiejętności kodowania i zbudowanie czegoś, co pozwoli Ci wykonywać powtarzalne zadania za pomocą zaledwie kilku kliknięć. Jeśli chcesz to osiągnąć, nauczenie się pisania rozszerzenia do Chrome to świetny początek.

Google Chrome udostępnia swoim twórcom rozszerzeń wiele różnych interfejsów API, takich jak dodawanie nowej strony, wyskakujących okienek, tworzenie powiadomień, konfigurowanie domyślnej wyszukiwarki, a nawet tworzenie elementu menu kontekstowego (menu, które pojawia się po kliknięciu prawym przyciskiem myszy na stronie).

Możliwości są nieograniczone, od rozszerzenia, które renderuje „Hello World!” do rozszerzenia, które umożliwia wykonanie zrzutu ekranu strony internetowej.

Jak napisać rozszerzenie do Chrome

Spis treści:

  • Struktura rozszerzenia
  • Ładowanie rozszerzenia
  • Dodawanie wyskakującego interfejsu użytkownika
  • Korzystanie z API powiadomień
  • Dodawanie pozycji menu kontekstowego
  • Używanie API przechowywania do przechowywania danych
  • Dystrybucja rozszerzenia
Jak stworzyć rozszerzenie #Google #Chrome: przewodnik krok po kroku dla początkujących
Kliknij, aby tweetować

W tym samouczku pokażemy, jak napisać rozszerzenie Chrome, które wysyła powiadomienia przeglądarki z wyskakującego menu. Wykorzystamy również menu kontekstowe i interfejsy API przechowywania danych, aby jak najlepiej je wykorzystać. Nazywamy to Powiadom! z wykrzyknikiem!

Utwórz rozszerzenie Google Chrome

Kod rozszerzenia jest publicznie dostępny na GitHub, więc możesz go rozwidlać i używać.

Jak napisać rozszerzenie Chrome: struktura

Zanim przejdziemy dalej, zapoznaj się z dokumentacją dla programistów Google Chrome, aby dowiedzieć się ogólnie o tworzeniu rozszerzeń Chrome.

Ponadto, jeśli chcesz napisać rozszerzenie do Chrome dla Chrome Web Store, zapoznaj się z ich zasadą jednego celu.

Zacznijmy od utworzenia nowego folderu o nazwie notify na Twoim urządzeniu. Ten folder będzie zawierał wszystko, co będzie częścią twojego rozszerzenia.

Teraz musisz stworzyć plik manifestu, który będzie zawierał wszystkie informacje o naszym rozszerzeniu. Utwórz plik o nazwie manifest.json i dołącz następujący kod: 

 { "name" : "Notify!" , "description" : "A Google Chrome extension!" , "version" : "1.0" , "manifest_version" : 3 , "icons" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } }
 Język kodu: JSON / JSON z komentarzami ( json )

Jak widać, do tej pory zawiera tylko meta-informacje o twoim rozszerzeniu, takie jak jego nazwa, opis i wersja. manifest_version informuje Chrome, której wersji interfejsu API rozszerzeń używasz.

Ładowanie rozszerzenia

Po utworzeniu pliku manifestu możesz załadować rozszerzenie w przeglądarce Chrome:

Ładowanie rozszerzenia do Google Chrome

Otwórz stronę zarządzania rozszerzeniami, przechodząc pod chrome://extensions lub możesz ją też otworzyć w menu Rozszerzenia w ustawieniach.

Tam włącz tryb programisty i użyj przycisku Załaduj rozpakowany , aby wybrać katalog rozszerzenia.

Spójrz na swoje rozszerzenie! Teraz, gdy Twoje rozszerzenie jest załadowane, możesz je ulepszać krok po kroku i obserwować zmiany.

Upewnij się, że dodałeś ikonę dla swojego rozszerzenia do folderu assets/icons/ , w przeciwnym razie pojawi się ikona domyślna.

Dodawanie wyskakującego interfejsu użytkownika

Kontynuujmy, dodając do rozszerzenia interfejs użytkownika, z którego ludzie mogą wchodzić w interakcje z dostarczonymi opcjami.

Jest na to wiele sposobów, na przykład dodanie całej strony, ale wyskakujące okienko jest zwykle sposobem na przejście do większości rozszerzeń.

Aby dodać wyskakujące okienko do rozszerzenia, musisz dodać to do swojego pliku manifest.json : 

 "action" : { "default_popup" : "popup.html" , "default_icon" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } },
 Język kodu: JavaScript ( javascript )

Dzięki temu powiesz rozszerzeniu lokalizację pliku HTML wyskakującego okienka i domyślnych ikon. Jest to tylko domyślna ikona, ponieważ interfejs API umożliwia zmianę ikony w dowolnym miejscu. Na przykład, jeśli utworzysz test Google PageSpeed, można wyświetlić różne ikony w witrynie na podstawie ich rankingów stron.

Wyskakujące okienko rozszerzenia

Wyskakujące okienko rozszerzenia Google Chrome

Teraz możesz dodać kod HTML wyskakującego okienka do pliku, tak jak w naszym przykładzie:

 <!DOCTYPE html > < html > < head > < link rel = "stylesheet" href = "assets/css/popup.css" > </ head > < body > < div id = "notify-wrapper" > < div id = "notify-header" > < h1 > Notify! </ h1 > </ div > < div id = "notify-containers" > < div class = "notify-form" > < label for = "text" > Notification </ label > < textarea name = "text" id = "notify-text" placeholder = "Let's notify!" > </ textarea > </ div > < div class = notify-buttons > < p > Total: < span id = "notify-count" > </ span > </ p > < button class = "button" id = "notify-reset" > Reset </ button > < button class = "button primary" id = "notify-button" > Notify! </ button > </ div > </ div > </ div > < script src = "assets/js/popup.js" > </ script > </ body > </ html >
 Język kodu: HTML, XML ( xml )

Ten plik HTML zawiera również linki do arkusza stylów i skryptu, aby dodać styl i funkcjonalność do naszego wyskakującego okienka.

Jeśli podążasz dalej, możesz pobrać kod CSS stąd. JavaScript zostanie dodany do pliku w dalszej części tego samouczka.

Do tej pory utworzyłeś rozszerzenie Google Chrome, które ma wyskakujące okienko i zajęło nam to tylko kilka linijek kodu. Jak powiedzieliśmy na początku, tworzenie rozszerzenia Google Chrome jest bardzo łatwe!

W dalszej części tego samouczka dodamy funkcjonalność do tego rozszerzenia i uczynimy z niego coś więcej niż tylko symbol zastępczy.

Korzystanie z API powiadomień

Jak sugeruje nazwa rozszerzenia, jest to rozszerzenie powiadomień, więc dodajmy trochę!

Zanim użyjesz niektórych interfejsów API, musisz określić ich uprawnienia w pliku manifest.json . Jednym z powodów, dla których warto to zrobić, jest to, aby użytkownicy rozszerzenia wiedzieli, o jakie uprawnienia prosi rozszerzenie przed ich zainstalowaniem.

W przypadku powiadomień robisz to w ten sposób: 

 "permissions" : [ "notifications" ],
 Język kodu: JavaScript ( javascript )

Musisz również dodać pracownika serwisu do rozszerzenia, aby wysyłać powiadomienia. W tym celu musisz dodać to do swojego manifestu: 

 "background" : { "service_worker" : "background.js" },
 Język kodu: JavaScript ( javascript )

Potrzebujesz pracownika serwisu dla interfejsu API powiadomień, ponieważ nie można go użyć bezpośrednio z pliku popup.js .

W pliku background.js musisz dodać następujący kod, aby wysłać powiadomienie: 

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : data.message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); } });
 Język kodu: JavaScript ( javascript )

Tutaj używamy detektora zdarzeń onMessage , aby uzyskać wyzwalacz do wypychania powiadomień z wyskakującego okienka.

Używamy również metody create do tworzenia nowego powiadomienia. Powiadomienia mogą być różnego rodzaju, ale tutaj używany jest typ „podstawowy”. Powinieneś rzucić okiem na wszystkie dostępne opcje.

Teraz, gdy metoda create jest na miejscu, możesz ją uruchomić z pliku popup.js w następujący sposób: 

 const text = document .getElementById( 'notify-text' ); const notify = document .getElementById( 'notify-button' ); notify.addEventListener( 'click' , () => { chrome.runtime.sendMessage( '' , { type : 'notification' , message : text.value }); } );
 Język kodu: JavaScript ( javascript )

W tym przypadku akcja sendMessage jest używana do wyzwalania powiadomienia. I voila! Mamy rozszerzenie, które wyzwala powiadomienie.

Interfejs API powiadomień Chrome

Upewnij się, że korzystasz z najnowszej wersji przeglądarki Google Chrome i przyznano jej uprawnienia do uruchamiania powiadomień. Krótko mówiąc, nie bądź taki jak ja, który spędził godziny próbując dowiedzieć się, dlaczego powiadomienia się nie pojawiały.

Dodawanie pozycji menu kontekstowego

Jak wspomniano we wstępie, menu kontekstowe to menu, które pojawia się po kliknięciu prawym przyciskiem myszy:

Menu kontekstowe Google Chrome

Może być wiele powodów, dla których Twoje rozszerzenie może zawierać element menu kontekstowego. Jednym z widocznych przykładów jest zaznaczenie tekstu kursorem, a następnie wyszukanie go w Google.

Do menu kontekstowego możesz dodać dowolną liczbę elementów, ale jeśli rozszerzenie doda więcej niż jeden element, zostaną one zwinięte w jeden element nadrzędny.

W tym celu musisz również dodać uprawnienia do swojego pliku manifestu: 

 "permissions" : [ "contextMenus" , "notifications" ],
 Język kodu: JavaScript ( javascript )

Teraz, gdy dodałeś uprawnienia dla contextMenus , możesz dodać to do swojego pliku background.js : 

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { notify( data.message ); } }); chrome.runtime.onInstalled.addListener( () => { chrome.contextMenus.create({ id : 'notify' , title : "Notify!: %s" , contexts :[ "selection" ] }); }); chrome.contextMenus.onClicked.addListener( ( info, tab ) => { if ( 'notify' === info.menuItemId ) { notify( info.selectionText ); } } ); const notify = message => { return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 Język kodu: JavaScript ( javascript )

Powyższy kod zawiera również kod z poprzedniego kroku do wyzwalania powiadomienia, które jest teraz wyodrębnione do funkcji notify , aby można było go ponownie wykorzystać.

Akcja contextMenus.create służy do dodawania elementu do menu kontekstowego. Jest podpięty do onInstalled , ponieważ wystarczy go zainicjować tylko raz.

Następnie, podobnie jak w poprzednim kroku, używamy contextMenus.onClicked do przechwytywania kliknięcia i wyzwalania powiadomienia.

Menu kontekstowe przeglądarki Google Chrome

Może to być bardzo sprytny sposób na połączenie funkcjonalności twojego rozszerzenia. Jeśli rozejrzysz się po rozszerzeniach używanych w przeglądarce, znajdziesz wiele rozszerzeń sprytnie wykorzystujących tę przestrzeń, aby poprawić wrażenia związane z ich rozszerzeniem.

Używanie API przechowywania do przechowywania danych

Teraz, gdy Twoje rozszerzenie ma kilka funkcji, którymi można się pochwalić, przyjrzyjmy się interfejsowi Storage API. Storage API jest przydatny, gdy chcesz przechowywać niektóre dane użytkownika w swoim rozszerzeniu.

Istnieją dwa typy interfejsu Storage API: lokalny i synchronizowany. Pamięć lokalna, jak sama nazwa wskazuje, jest zapisywana w przeglądarce i pozostaje lokalna. Dla porównania, przechowywanie synchronizacji umożliwia synchronizację danych między przeglądarkami przy użyciu tego samego konta Google. Do naszych celów używamy pamięci lokalnej.

Najpierw musisz dodać uprawnienia do przechowywania do pliku manifestu: 

 "permissions" : [ "contextMenus" , "notifications" , "storage" ],
 Język kodu: JavaScript ( javascript )

Następnie możesz użyć magazynu, storage.local.get i storage.local.set , metod pobierania lub zapisywania danych.

Możesz dodać następujący kod do pliku popup.js : 

 const reset = document .getElementById( 'notify-reset' ); const counter = document .getElementById( 'notify-count' ); chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; counter.innerHTML = value; } ); chrome.storage.onChanged.addListener( ( changes, namespace ) => { if ( changes.notifyCount ) { let value = changes.notifyCount.newValue || 0 ; counter.innerHTML = value; } }); reset.addEventListener( 'click' , () => { chrome.storage.local.clear(); text.value = '' ; } );
 Język kodu: JavaScript ( javascript )

Ten kod robi dwie rzeczy:

  • Aktualizuje liczbę powiadomień w wyskakującym okienku, gdy otwieramy wyskakujące okienko lub zmienia się wartość pamięci. Do nasłuchiwania zmian w pamięci używa się storage.onChanged .
  • Częściowo czyścimy pamięć, gdy użytkownik kliknie przycisk resetowania.

Powyższy kod ma za zadanie pobrać najnowszą liczbę i ją zaktualizować. Teraz konfiguracja danych pozostaje. W tym celu możesz zaktualizować naszą funkcję notify w następujący sposób: 

 const notify = message => { chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; chrome.storage.local.set({ 'notifyCount' : Number ( value ) + 1 }); } ); return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 Język kodu: JavaScript ( javascript )

Tutaj otrzymujemy najnowsze dane pamięci masowej, a następnie aktualizujemy je o najnowszą liczbę.

Podobnie możesz użyć interfejsu API chrome.storage.sync , aby zsynchronizować opcje między przeglądarkami.

Dystrybucja rozszerzenia

Gratulacje! Zrobiłeś to! Udało Ci się utworzyć rozszerzenie przeglądarki Google Chrome, które wykorzystuje wiele różnych elementów przeglądarki Google Chrome, w tym:

  • Wyskakujące okienka
  • Powiadomienia API
  • Menu kontekstowe
  • API pamięci masowej

Jeśli chcesz zobaczyć kod tego rozszerzenia, możesz go pobrać w tym repozytorium Notify GitHub.

Wszyscy lubimy pokazywać światu wspaniałą pracę, którą wykonujemy. Gdy rozszerzenie będzie gotowe, możesz przesłać je do Chrome Web Store, aby inni użytkownicy Chrome mogli je pobrać.

Jeśli chcesz poznać inne opcje, które Google Chrome oferuje programistom rozszerzeń, zalecamy zapoznanie się z oficjalną dokumentacją.

Mam nadzieję, że ten artykuł przyczynił się do nauczenia Cię, jak napisać rozszerzenie do Chrome. Cieszymy się, że możemy zobaczyć, co możesz stworzyć, więc daj nam znać o swoich przygodach z rozwojem rozszerzenia Google Chrome w sekcji komentarzy poniżej.

Możesz być zainteresowanym także tym:

  • 18 najlepszych agencji WordPress do tworzenia stron internetowych, projektowania, marketingu i nie tylko
  • 15 najlepszych programów do projektowania stron internetowych dostępnych obecnie na rynku
  • 9 najlepszych porównywanych i testowanych rozwiązań do tworzenia witryn
Jak utworzyć rozszerzenie Google #Chrome #: przewodnik krok po kroku dla początkujących
Kliknij, aby tweetować

…

Nie zapomnij dołączyć do naszego szybkiego kursu na temat przyspieszania witryny WordPress. Dzięki kilku prostym poprawkom możesz skrócić czas ładowania nawet o 50-80%:

Subskrybuj teraz obraz

Układ i prezentacja autorstwa Chrisa Fitzgeralda i Karola K.