Jak utworzyć rozszerzenia Chrome od Scratch

Jeśli sobie życzysz dodaj lub zmodyfikuj niektóre funkcje w przeglądarce Google Chrome musisz użyć rozszerzenia. Chociaż możesz pobrać rozszerzenie z Chrome Web Store, ale czasami potrzebujesz określonej funkcji, której nie możesz znaleźć w żadnym istniejącym rozszerzeniu.

Dobrą wiadomością jest to, że możesz utworzyć własne rozszerzenie, aby dodać lub zmodyfikować wymaganą funkcjonalność lub utworzyć nowy dodatek lub aplikację dla Google Chrome, które możesz później rozpowszechniać wśród innych użytkowników za pomocą Chrome Web Store.

Poniżej pokażę ci najprostszy sposób na utworzenie rozszerzenia. Jeśli masz jakąś wiedzę na temat tworzenia stron internetowych (HTML, CSS i JS), poczujesz się jak w domu. Jeśli nie, najpierw obejrzyj te kanały poznaj podstawy tworzenia stron internetowych, następnie kontynuuj poniżej.

Wymagania wstępne

Przed rozpoczęciem tego samouczka musisz spełnić następujące wymagania.

1. Musisz być zaznajomiony HTML, CSS i JavaScript. [Sprawdź zasoby]
2. Musisz mieć edytor kodu napisać rozszerzenie. [Porównaj edytory]
3. (Opcjonalnie) Jeśli chcesz rozpowszechniać swoje rozszerzenie na innych użytkowników, musisz mieć konto programisty w Chrome Web Store. [Utwórz konto]

Uwaga: Google prosi Cię o niewielką opłatę za utworzenie konta programisty w Chrome Web Store.

Utwórz rozszerzenie

W tym samouczku podzielę się procesem tworzenia rozszerzenie do zrobienia dla Google Chrome. To będzie narzędzie (jak pokazano poniżej), aby zademonstrować podstawowe komponenty i możliwości dostarczone rozszerzeniom.

1. Pobierz szablon

Google Chrome, jak każda inna platforma, wymaga jej rozszerzenia mają ustaloną strukturę, co może wydawać się skomplikowane dla początkujących. Dlatego dobrze jest mieć szablon szablonowy dla rozszerzenia, które zapewni wszystkie potrzeby.

Extensionizr jest najlepszym generatorem kotłów dla rozszerzeń chrome. Pozwala wybrać jeden z podanych typów rozszerzeń - działanie przeglądarki (akcja dla wszystkich stron lub przeglądarki), akcja strony (akcja dla bieżącej strony) lub ukryte rozszerzenie (akcja w tle, która jest zwykle ukryta w interfejsie frontowym).

Ponadto zapewnia różne opcje dostrajania uwzględnij / wyklucz niezbędne dodatki, uprawnienia, itd. Musisz wybrać “Działanie przeglądarki” jako typ rozszerzenia i “Brak tła” jako strona tła tego samouczka.

Po wybraniu opcji tworzenia rozszerzenia próbki naciśnij przycisk “Pobierz to!” przycisk w Extensionizr. Wreszcie, rozpakuj archiwum (.zip) do katalogu i otwórz edytor kodu, aby rozpocząć pisanie rozszerzenia.

2. Wpisz kod rozszerzenia

Po pobraniu i rozpakowaniu szablonu zobaczysz strukturę katalogów, jak pokazano na poniższym zrzucie ekranu. Szablon jest uporządkowany i musisz wiedzieć, że najważniejszym plikiem jest “manifest.json“.

Poznajmy także inne pliki i foldery w tym katalogu:

1. _locales: Jest przyzwyczajony przechowuj informacje o języku dla aplikacji wielojęzycznej.
2. css: Służy do przechowywania zewnętrznych bibliotek frontowych, takich jak Bootstrap 4.
3. ikony: Został zaprojektowany tak, aby ikony rozszerzenia były dostępne w różnych rozmiarach.
4. js: Jest przydatny do zapisywania biblioteki zaplecza innych firm jak jQuery 3.
5. src: Przechowuje rzeczywisty kod, który napiszesz dla swojego rozszerzenia.

manifest.json

Zawiera podstawowe metadane dotyczące Twojej aplikacji, który określa szczegóły aplikacji w przeglądarce. Możesz go edytować, aby ustawić nazwę rozszerzenia, opis, stronę internetową, ikonę itp. Wraz ze szczegółami, takimi jak działania i uprawnienia przeglądarki.

Na przykład w poniższym kodzie zauważyłem, że zmieniłem nazwę, opis i homepage_url wraz z default_title w przeglądarce_actionibility. Co więcej, ja dodany “przechowywanie” w ramach uprawnień ponieważ musimy przechowywać dane w naszym rozszerzeniu.

 „name”: „Todoizr - To-do Simplified”, „version”: „0.0.1”, „manifest_version”: 2, „description”: „Prosta aplikacja do zrobienia dla wszystkich.”, „homepage_url”: ” https://go.aksingh.net/todoizr "," icons ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" icons / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - To-do Simplified "," default_popup ":" src / browser_action / browser_action.html "," uprawnienia ": [" storage "] 

src browser_action

Ten katalog będzie zawierał kod działania przeglądarki. W naszym przypadku to zrobimy zakoduj wyskakujące okno pokazane po kliknięciu ikony rozszerzenia w przeglądarce. Nasze rozszerzenie pozwoli użytkownikom dodawać i wyświetlać rzeczy do zrobienia w wyskakującym okienku.

Uwaga: Zawsze możesz zacząć od kodu, klonując to repozytorium.

Kod początkowy z szablonu

Chociaż ten katalog zawierał tylko plik HTML zawierający cały kod, postanowiłem podzielić go na trzy osobne pliki w celu zwiększenia przejrzystości. Powiedział, że nazwa pliku HTML “browser_action.html” teraz ma następujący kod:

Ponadto plik stylu o nazwie “browser_action.css” ma poniższą zawartość, a nazwa pliku JavaScript “browser_action.js” na razie jest pusty.

 #mainPopup padding: 10px; wysokość: 200px; szerokość: 400px; rodzina czcionek: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Zaprojektuj interfejs wyskakującego okienka

Po skonfigurowaniu początkowego projektu najpierw zaprojektuj interfejs popup. mam skonfigurować interfejs z minimalistycznym podejściem, pokazuje nazwę u góry, a następnie formularz do dodawania rzeczy do zrobienia i obszar poniżej do przeglądania dodanych elementów. Inspiruje się uproszczonym designem “Styl formularza 5“.

W poniższym kodzie dodałem dwa divy - jeden do wyświetlania formularza do dodania rzeczy do zrobienia, a drugi do wyświetlania listy już dodanych rzeczy do zrobienia. To powiedziawszy, nowy kod dla “browser_action.html” następująco:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

I plik stylu “browser_action.css” teraz ma następujący kod:

 @import url ("./ form_style_5.css"); #mainPopup height: 200px; szerokość: 300px; rodzina czcionek: Helvetica, Ubuntu, Arial, sans-serif;  / * Formularz czynności do wykonania * / .form-style-5 margin: auto; padding: 0px 20px;  .form-style-5: first-child background: none;  .form-style-5 h1 color: # 308ce3; rozmiar czcionki: 20px; wyrównywanie tekstu: środek;  .form-style-5 input [type = "text"] width: auto; float: left; margin-bottom: unset;  .form-style-5 input [type = "button"] background: # 308ce3; szerokość: auto; float: dobrze; padding: 7px; granica: brak; border-radius: 4px; rozmiar czcionki: 14px;  .form-style-5 input [type = "button"]: hover background: # 3868d5;  / * Lista rzeczy do zrobienia * / .form-style-5: last-child height: inherit; margin-bottom: 5px;  .form-style-5 ul padding: 20px;  .form-style-5 ul li font-size: 14px;  

Wreszcie, plik stylu strony trzeciej “form_style_5.css” ma poniższą treść. Po prostu pochodzi z jego strony internetowej, aby zainspirować projekt naszego rozszerzenia.

 / * Form Style 5 autorstwa Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; dopełnienie: 10px 20px; tło: # f4f7f8; margin: 10px auto; padding: 20px; tło: # f4f7f8; border-radius: 8px; font-family: Georgia, „Times New Roman”, Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 legend font-size: 1.4em; margin-bottom: 10px;  .form-style-5 label display: block; margin-bottom: 8px;  .form-style-5 input [type = "text"], .form-style-5 input [type = "date"], .form-style-5 input [type = "datetime"], .form-style -5 input [type = "email"], .form-style-5 input [type = "number"], .form-style-5 input [type = "search"], .form-style-5 input [type = "time"], .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 select font-family: Georgia, "Times New Roman", Times , szeryf; background: rgba (255,255,255, .1); granica: brak; border-radius: 4px; rozmiar czcionki: 16px; margines: 0; zarys: 0; padding: 7px; szerokość: 100%; wielkość pudełka: obramowanie; -webkit-box-sizing: border-box; -moz-box-sizing: obramowanie; kolor tła: # e8eeef; kolor: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) wstawka; box-shadow: 0 1px 0 rgba (0,0,0,0.03) wstawka; margin-bottom: 30px;  .form-style-5 input [type = "text"]: focus, .form-style-5 input [type = "date"]: focus, .form-style-5 input [type = "datetime"]: focus, .form-style-5 input [type = "email"]: focus, .form-style-5 input [type = "number"]: focus, .form-style-5 input [type = "search"] : focus, .form-style-5 input [type = "time"]: focus, .form-style-5 input [type = "url"]: focus, .form-style-5 textarea: focus, .form- style-5 select: focus tło: # d2d9dd;  .form-style-5 wybierz -webkit-pojawienie się: menulist-button; wysokość: 35px;  .form-style-5 .number background: # 1abc9c; kolor: #fff; wysokość: 30px; szerokość: 30px; wyświetlacz: blok śródliniowy; rozmiar czcionki: 0,8em; margin-right: 4px; line-height: 30px; wyrównywanie tekstu: środek; text-shadow: 0 1px 0 rgba (255,255,255,0,2); border-radius: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], .form-style-5 input [type = "button"] position: relative; Blok wyświetlacza; dopełnienie: 19px 39px 18px 39px; kolor: #FFF; margin: 0 auto; tło: # 1abc9c; rozmiar czcionki: 18px; wyrównywanie tekstu: środek; styl czcionki: normalny; szerokość: 100%; granica: 1px bryła # 16a085; border-width: 1px 1px 3px; margin-bottom: 10px;  .form-style-5 input [type = "submit"]: hover, .form-style-5 input [type = "button"]: hover background: # 109177;  

Napisz logikę wyskakującego okienka

Po zakończeniu pracy z interfejsem rozszerzenia napiszmy teraz logikę jego działania. Potrzebujemy naszego rozszerzenia, aby móc dodawaj rzeczy do zrobienia i wyświetlaj je w oknie podręcznym. Dodamy więc słuchacza kliknięć przycisku, aby dodać tekst wejściowy jako pozycję do zrobienia i słuchacza ładowania strony, aby pokazać te elementy.

W poniższym kodzie użyjemy dwóch funkcji - sync.get () i sync.set (), które są częścią “chrome.storage“. Potrzebujemy drugiego, aby zapisać rzeczy do zrobienia w magazynie i pierwszy, aby je odzyskać i pokazać.

To powiedziawszy, poniżej znajduje się ostateczny kod “browser_action.js” plik. Jak widać poniżej, kod jest bardzo komentowany, aby pomóc ci zrozumieć jego cel.

 funkcja loadItems () / * Najpierw pobierz () dane z pamięci * / chrome.storage.sync.get (['todo'], funkcja (wynik) var todo = [] if (wynik && result.todo && result.todo.trim ()! == ") / * Przetwarza i pobiera tablicę zapisaną jako łańcuch * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) dla (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Załaduj rozszerzenie

Gdy skończysz pisać rozszerzenie, nadszedł czas, aby przetestować go za pomocą funkcji Google Chrome, która oferuje ładowanie nieopakowanych, nieopakowanych rozszerzeń. Ale najpierw musisz włącz tryb programisty w przeglądarce: kliknij opcje przycisk > wybierać “Więcej narzędzi” > Rozszerzenia, a następnie włącz “tryb dewelopera“.

Teraz zobaczysz więcej przycisków pod paskiem wyszukiwania. Tutaj kliknij “Załaduj rozpakowany” przycisk. Spyta o katalog - przeglądaj i wybierz katalog swojego rozszerzenia, a załaduje rozszerzenie. Jeśli edytujesz lub aktualizujesz kod swojego rozszerzenia, możesz kliknąć przeładuj przycisk, aby załadować najnowsze zmiany.

W naszym przykładzie, zobaczysz ikonę rozszerzenia obok ikony profilu, ponieważ dodaliśmy akcję przeglądarki do naszego rozszerzenia próbki. Możesz kliknąć tę ikonę na dodawaj i wyświetlaj rzeczy do zrobienia w naszym rozszerzeniu, ponieważ jest to określona akcja.

Rozpowszechnij rozszerzenie

Chociaż tak jest łatwe przesłanie rozszerzenia w Chrome Web Store proces jest zbyt długi, aby pokryć wszystkie szczegóły. Krótko mówiąc, tworzysz konto programisty, pakujesz swoje rozszerzenie, a następnie przesyłasz je wraz z jego szczegółami dotyczącymi zawartości (jak nazwa, ikona, zrzuty ekranu itp.); jak podano w przewodniku krok po kroku.

Co następne? Czytaj i koduj

Jak zapewne się spodziewałeś, celem tego samouczka jest rozpoczęcie tworzenia rozszerzenia dla Google Chrome. Próbowałem omówić podstawowe pojęcia; jednak, musisz wiedzieć o wiele więcej za zrobienie poważnego rozszerzenia.

To powiedziawszy, poniżej znajdują się niektóre z moich ulubione zasoby do przejścia za naukę tworzenia rozszerzeń dla Google Chrome i innych przeglądarek opartych na Chromium:

1. Wszystkie umiejętności, komponenty i cechy rozszerzeń.
2. Przykładowe rozszerzenia zespołu za Google Chrome.

Jeśli przejrzałeś te zasoby i jesteś gotowy na jakieś wyzwanie, spróbuj dodać poniższe funkcje w rozszerzonym właśnie rozszerzeniu:

1. Opcja usunięcia zapisanych rzeczy do zrobienia.
2. Funkcja wyświetlania powiadomień po zakończeniu dodawania elementu.

Chodzi o stworzenie pierwszego rozszerzenia do najpopularniejszej przeglądarki. Jakie rozszerzenie stworzyliście? Czy masz problem? Daj mi znać swoją historię, pisząc komentarz poniżej lub pisząc do mnie na @aksinghnet.

Na koniec pamiętaj, że możesz wypróbować Todoizr (rozszerzenie, które stworzyliśmy) w Chrome Web Store i sprawdzić jego pełny kod w tym repozytorium.