Home Blog technologiczny Stwórz swoje pierwsze rozszerzenie Chrome

Stwórz swoje pierwsze rozszerzenie Chrome

Krzysztof Waśko

11.06.2024

Rozszerzenia Chrome zwiększają możliwości tej przeglądarki i podwyższają poziomu komfortu użytkowania. W tym samouczku przeprowadzę Cię przez proces tworzenia prostego rozszerzenia Chrome, w tym pliku manifestu oraz potrzebnych skryptów. Znajdziesz tu również przykładowy kod źródłowy, który pomoże ci zacząć.

Jak zrobić rozszerzenie do Chrome? Wymagania wstępne

Aby móc postępować zgodnie z przykładami przedstawionymi poniżej, potrzebne są Ci:

Podstawowa znajomość JavaScript, HTML i CSS
Przeglądarka Google Chrome zainstalowana na komputerze
Edytor tekstu do pisania kodu (np. Visual Studio Code, Sublime Text lub Notepad++)

Tworzenie prostego rozszerzenia Chrome

Krok 1: Konfiguracja folderu rozszerzeń i pliku manifestu

Utwórz w komputerze nowy folder. To w nim będziesz przechowywać wszystkie poniżej opisane pliki związane z rozszerzeniem Chrome. Możesz nadać mu dowolną nazwę, na przykład „MyFirstExtension”.

Następnie dodaj nowy plik JSON o nazwie „manifest.json”, który zawierać będzie metadane dotyczące rozszerzenia. Jest on wymagany, aby Chrome mógł je rozpoznać i załadować. Wklej następujący kod do pliku „manifest.json”:

{
  "manifest_version": 3,
  "name": "My First Chrome Extension",
  "version": "1.0",
  "description": "A simple Chrome extension tutorial",
  "icons": {
    "48": "icon.png"
  },
  "permissions": ["tabs", "activeTab", "scripting"],
  "action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["content.js"]
    }
  ]
}

Plik manifestu definiuje podstawowe informacje o rozszerzeniu, m.in. jego nazwę, wersję i opis. Określa również wymagane uprawnienia, właściwości akcji przeglądarki oraz skrypty background.js i content.js, które zostaną załadowane.

Krok 2: Tworzenie ikony i wyskakującego okienka

Pora utworzyć prostą ikonę dla Twojego rozszerzenia. Użyj w tym celu dowolnego narzędzia do edycji obrazu, aby utworzyć plik PNG o rozmiarze 48 × 48 pikseli. Zapisz go jako „icon.png”.

Następnie utwórz nowy plik HTML o nazwie „popup.html”. Zdefiniuje on zawartość wyskakującego okienka, które pojawi się, gdy użytkownik kliknie ikonę rozszerzenia. Wklej następujący kod do pliku „popup.html”:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My First Chrome Extension</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a simple Chrome extension tutorial.</p>
    <button id="changeColor">Change background color</button>
    <script src="popup.js"></script>
  </body>
</html>

Krok 3: Pisanie skryptów background.js i content.js

Utwórz dwa pliki JavaScript o nazwach „background.js” i „content.js”. Pliki te będą zawierać logikę rozszerzenia. W pliku „background.js” wklej następujący kod:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["content.js"],
  });
});

„Nasłuchuje” on zdarzenia kliknięcia ikony rozszerzenia i – po jej kliknięciu – wykonuje skrypt „content.js”. W pliku „content.js” wklej następujący kod:

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.message === 'changeBackground') {
    document.body.style.backgroundColor = getRandomColor();
  }
});

Powyższy kod definiuje funkcję getRandomColor(), która generuje losowy kod koloru szesnastkowego. Następnie ustawia barwę tła bieżącej strony internetowej zgodnie z wygenerowanym kolorem.

Krok 4: Implementacja skryptu wyskakującego okienka

Utwórz nowy plik JavaScript o nazwie „popup.js”. Będzie on zawierał logikę dla przycisku „Change background color”. W pliku „popup.js” wklej następujący kod:

document.getElementById("changeColor").addEventListener("click", () => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.scripting.executeScript(
      {
        target: { tabId: tabs[0].id },
        files: ["content.js"],
      },
      () => {
        chrome.tabs.sendMessage(tabs[0].id, { message: "changeBackground" });
      }
    );
  });
});

„Nasłuchuje” on zdarzeń kliknięcia przycisku „Change background color”, a po jego kliknięciu wstawia skrypt „content.js” do aktywnej karty i wysyła wiadomość do skryptu zawartości, aby zmienić kolor tła strony internetowej.

Krok 5: Ładowanie i testowanie rozszerzenia

Aby załadować rozszerzenie w Chrome, wykonaj następujące kroki:

Otwórz Chrome i przejdź do chrome://extensions/
Włącz przełącznik „Tryb dewelopera” w prawym górnym rogu
Kliknij przycisk „Załaduj rozpakowane” i wybierz folder „MyFirstExtension”

Twoje rozszerzenie pojawi się na liście rozszerzeń, a jego ikona będzie widoczna na pasku narzędzi Chrome. Kliknij ikonę, aby otworzyć wyskakujące okienko. Kliknij przycisk „Change background color”, aby zmienić kolor tła bieżącej strony internetowej.

Dodawanie rozszerzenia do Chrome Web Store

Po stworzeniu i przetestowaniu rozszerzenia Chrome następnym krokiem jest opublikowanie go w Chrome Web Store. Pozwoli to innym użytkownikom na jego znalezienie, pobranie i zainstalowanie. Jakie kroki musisz wykonać, aby dodać rozszerzenie do Chrome Web Store?

Krok 1: Przygotowanie paczki z rozszerzeniem

Przed przesłaniem rozszerzenia utwórz w folderze „MyFirstExtension” plik ZIP zawierający wszystkie pliki, w tym pliki: manifestu, HTML, JavaScript, CSS i ikony. Aby utworzyć plik ZIP:

Wybierz wszystkie pliki w folderze „MyFirstExtension”.
Kliknij wybrane pliki prawym przyciskiem myszy i wybierz „Wyślij do” > „Folder skompresowany (spakowany)” (Windows) lub „Kompresuj” (macOS).
Zmień nazwę wygenerowanego pliku ZIP na coś odpowiedniejszego, np. „MyFirstExtension.zip”.

Krok 2: Utwórz konto dewelopera

Do publikowania rozszerzeń w Chrome Web Store potrzebne jest konto programisty Google. Jeśli jeszcze go nie masz, wykonaj poniższe kroki, aby je utworzyć:

Odwiedź stronę Chrome Web Store Developer (https://chrome.google.com/webstore/developer/dashboard).
Zaloguj się za pomocą konta Google lub utwórz nowe.
Kliknij przycisk „Utwórz konto dewelopera” i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby ukończyć proces rejestracji (np. konieczne jest uiszczenie jednorazowej opłaty rejestracyjnej).

Krok 3: Prześlij swoje rozszerzenie

Po skonfigurowaniu konta dewelopera możesz teraz przesłać swoje rozszerzenie do Chrome Web Store. Jak to zrobić? Postępuj zgodnie z poniższymi wskazówkami.

Przejdź do panelu dewelopera Chrome Web Store.
Kliknij przycisk „Nowy element”, aby rozpocząć proces przesyłania.
Kliknij przycisk „Wybierz plik” i wskaż utworzony wcześniej plik „MyFirstExtension.zip”.
Poczekaj, aż plik zostanie przesłany. Gdy to się uda, zostaniesz przekierowany na stronę edycji rozszerzenia.

Krok 4: Wypełnij szczegółowe dane dotyczące rozszerzenia

Na stronie edycji należy podać niezbędne informacje o rozszerzeniu:

Wypełnij wymagane pola, m.in. „szczegółowy opis”, „kategoria” i „język”.
Prześlij zrzuty ekranu, obrazy promocyjne lub materiały wideo, aby zaprezentować funkcje swojego rozszerzenia.
Podaj adres skrzynki e-mail lub strony internetowej pomocy technicznej, aby użytkownicy mogli się z Tobą skontaktować w przypadku problemów lub pytań.
Ustaw widoczność rozszerzenia (publiczne lub niepubliczne) i regiony, w których będzie ono dostępne.
W razie potrzeby określ dodatkowe informacje, takie jak adres URL polityki prywatności i oceny treści.

Krok 5: Opublikuj swoje rozszerzenie

Po podaniu szczegółowych danych dotyczących rozszerzenia kliknij przycisk „Prześlij do sprawdzenia”. Znajdziesz go w dolnej części strony edycji. Twoje rozszerzenie zostanie przesłane do zespołu Chrome Web Store w celu sprawdzenia.

Proces weryfikacji może potrwać kilka dni lub nawet tygodni, w zależności od różnych czynników. Po zatwierdzeniu rozszerzenia stanie się ono publicznie dostępne w Chrome Web Store, a użytkownicy będą mogli je wyszukiwać, pobierać i instalować.

Wnioski

Gratulacje! Udało Ci się pomyślnie utworzyć i opublikować swoje pierwsze rozszerzenie Chrome. Dzięki tej podstawowej wiedzy możesz teraz odkrywać bardziej zaawansowane funkcje i tworzyć bardziej złożone rozszerzenia. Pamiętaj, że rozszerzenia Chrome to doskonały sposób na zwiększenie funkcjonalności przeglądarki i poprawę komfortu jej użytkowania. Nie wahaj się więc eksperymentować i zgłębiać dalej tego tematu. Przyjemnego kodowania!