Jak utworzyć rozszerzenie Chrome od podstaw w 3 krokach

Spis treści:

Dodatki do przeglądarek, zwane też wtyczkami, to narzędzia, które wzbogacają funkcjonalność Twojej przeglądarki. Mówiąc inaczej, rozszerzają one możliwości oferowane przez standardową przeglądarkę.

Ale w czym rozszerzenie przewyższa aplikację internetową? Otóż, rozszerzenie ma dostęp do wszystkich interfejsów API przeglądarki, co daje mu znaczącą przewagę w kontroli nad jej działaniem.

Dzięki rozszerzeniu masz możliwość:

✅ Modyfikowania wyglądu przeglądarki i kart.

✅ Wprowadzania nowych skrótów klawiszowych do operacji przeglądarki.

✅ Śledzenia aktywności przeglądarki i ruchu sieciowego.

Google Chrome udostępnia również sklep, w którym można umieszczać rozszerzenia, umożliwiając innym użytkownikom korzystanie z nich. Choć tworzenie rozszerzenia do Chrome może wydawać się skomplikowane, w gruncie rzeczy sprowadza się do użycia HTML, CSS i JavaScript.

Tak, do stworzenia rozszerzenia Chrome wystarczą podstawowe technologie webowe, takie jak JavaScript. Poniżej znajdziesz przewodnik, który pokaże Ci, jak to zrobić!

Jak zbudować rozszerzenie do Chrome

W tym poradniku pokażę Ci, jak stworzyć rozszerzenie dla Chrome, które analizuje historię Twojego przeglądania i prezentuje ją w formie podręcznego okienka.

Jakie pliki są potrzebne?

Do stworzenia rozszerzenia do Chrome niezbędny jest tylko jeden plik – manifest.json. Pozostała część kodu jest tworzona tak samo, jak w przypadku zwykłej aplikacji internetowej.

Konfiguracja pliku manifest.json

Ten plik definiuje, jak ma działać rozszerzenie oraz jego konfigurację. Poniżej przykład typowego pliku manifest:

{
  "manifest_version": 3,
  "name": "History",
  "description": "View Browsing History",
  "version": "0.1",
  "action": {
    "default_popup": "index.html"
  }
}

Obecnie najnowszą wersją pliku manifest jest v3. Według Google, wprowadza ona usprawnienia w zakresie bezpieczeństwa, prywatności i wydajności rozszerzeń, a także pozwala na wykorzystanie otwartych technologii internetowych, takich jak Service Workers i obietnice.

W pliku manifest znajduje się również właściwość action. Określa ona, który plik HTML ma zostać otwarty w okienku po kliknięciu ikony rozszerzenia. Dostępna jest także właściwość default_icon, pozwalająca na ustawienie domyślnej ikony rozszerzenia.

Tworzenie aplikacji

Czas zbudować aplikację, która będzie wyświetlana użytkownikowi jako okienko. Nie różni się ona niczym od zwykłej aplikacji webowej.

Na początek musisz utworzyć plik wejściowy, który zostanie wskazany we właściwości default_popup w pliku manifest. Utworzyłem plik Index.html jako punkt wejścia dla tego rozszerzenia.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome Extension</title>
    <link rel="stylesheet" href="https://wilku.top/how-to-create-a-chrome-extension-from-scratch-in-3-steps/style.css">
</head>
<body>
    <h2>Browsing History</h2>
    <ul class="list"></ul>
    <script src="./app.js"></script>
</body>
</html>

Dołączyłem arkusz stylów, aby nadać stronie schludny wygląd w wyskakującym okienku. Dodatkowo, dostępny jest także plik Javascript, który odpowiada za funkcjonalność rozszerzenia.

function searchHistory() {
    chrome.history.search({
        text: '',
        startTime: new Date("2023-10-01").getMilliseconds()
    }, (results) => {
        for (const result of results) {
            let liItem = document.createElement("li")
            let link = document.createElement("a")
            link.innerText = result.title
            link.href = result.url
            liItem.appendChild(link)
            document.querySelector(".list").appendChild(liItem)
        }
    })
}

document.addEventListener("DOMContentLoaded", () => {
    searchHistory()
})

Ten plik wykorzystuje interfejs API historii Chrome, aby pobrać historię przeglądania i wyświetlić ją w okienku. Po kliknięciu ikony rozszerzenia uruchamiane jest zdarzenie DOMContentLoaded, które wywołuje funkcję searchHistory, zawierającą właściwy kod.

Metoda wyszukiwania interfejsu API historii przyjmuje obowiązkowy parametr text, czyli tekst, na podstawie którego chcesz filtrować historię. Jeśli pozostawisz go jako pusty ciąg, historia zostanie zwrócona bez filtrowania.

Kolejnym przydatnym parametrem jest startTime. Służy on do filtrowania wyników historii w oparciu o czas, jaki upłynął od podanej daty początkowej. Na przykład, jeśli określisz czas rozpoczęcia sprzed tygodnia, zostanie pobrana tylko historia z ostatniego tygodnia. Jest to parametr opcjonalny i domyślnie ustawiany jest na ostatnie 24 godziny.

Aby pobrać wyniki, interfejs API udostępnia funkcję zwrotną, która zwraca wyniki w postaci tablicy. Możesz przetworzyć tę tablicę i stworzyć na jej podstawie listę.

for (const result of results) {
    let liItem = document.createElement("li")
    let link = document.createElement("a")
    link.innerText = result.title
    link.href = result.url
    liItem.appendChild(link)
    document.querySelector(".list").appendChild(liItem)
}

Aby skorzystać z interfejsu API historii, w pliku manifest musimy zadeklarować uprawnienie „history”.

{
    "manifest_version": 3,
    "name": "History",
    "description": "View Browsing History",
    "version": "0.1",
    "action": {
      "default_popup": "index.html"
    },
    "permissions": [
        "history"
    ]
}

Uruchomienie rozszerzenia

To najprostszy etap tworzenia i uruchamiania rozszerzenia do Chrome. W menu przeglądarki kliknij trzy kropki, przejdź do opcji Rozszerzenia, a następnie Zarządzaj rozszerzeniami. Możesz również skorzystać z bezpośredniego linku: chrome://extensions/.

Upewnij się, że tryb deweloperski jest włączony.

Następnie kliknij opcję Załaduj rozpakowane i wybierz folder, w którym znajduje się utworzone rozszerzenie. Po załadowaniu zobaczysz rozszerzenie na liście.

Aby uruchomić rozszerzenie, kliknij jego ikonę na pasku akcji Chrome. Powinno pojawić się okienko z listą historii.

Gratulacje! Właśnie utworzyłeś proste rozszerzenie do Chrome. Jeśli chcesz zobaczyć więcej przykładów, sprawdź przykładowe rozszerzenia Chrome w oficjalnym repozytorium Google Chrome.

Jeśli chcesz opublikować swoje rozszerzenie w sklepie Chrome Web Store, wykonaj te kroki i uiść jednorazową opłatę rejestracyjną.

Podsumowanie

Tworzenie rozszerzeń do Chrome jest łatwe, jeśli masz podstawową wiedzę o tworzeniu aplikacji internetowych. Wystarczy utworzyć plik manifest, aby Twoja aplikacja stała się rozszerzeniem.

Teraz, gdy wiesz, jak stworzyć rozszerzenie do przeglądarki Chrome, zapoznaj się z najlepszymi rozszerzeniami Chrome, które mogą ułatwić pracę programistom.