Uruchamiaj skrypty na każdej stronie

Utwórz pierwsze rozszerzenie, które wstawia nowy element na stronie.

Omówienie

Ten samouczek tworzy rozszerzenie, które dodaje oczekiwany czas czytania do dowolnego rozszerzenia do Chrome i dodaje Strona dokumentacji Chrome Web Store.

Wydłużenie czasu czytania na stronie powitalnej rozszerzenia
Rozszerzenie czasu czytania na stronie powitalnej rozszerzenia.

W tym przewodniku objaśnimy następujące pojęcia:

  • Plik manifestu rozszerzenia.
  • rozmiarów ikon używanych w rozszerzeniu.
  • Jak wstawić kod na stronach za pomocą skryptów treści.
  • Jak korzystać z wzorców dopasowania
  • Uprawnienia rozszerzeń.

Zanim rozpoczniesz

W tym przewodniku zakładamy, że masz już podstawowe doświadczenie w tworzeniu stron internetowych. Zajrzyj do Samouczek Hello world z wprowadzeniem do przepływu pracy tworzenia rozszerzeń.

Tworzenie rozszerzenia

Na początek utwórz nowy katalog o nazwie reading-time, w którym będą przechowywane pliki rozszerzenia. Jeśli możesz pobrać pełny kod źródłowy z GitHub.

Krok 1. Dodaj informacje o rozszerzeniu

Jedynym wymaganym plikiem jest plik JSON manifestu. Zawiera on ważne informacje o . Utwórz plik manifest.json w katalogu głównym projektu i dodaj ten kod:

{
  "manifest_version": 3,
  "name": "Reading time",
  "version": "1.0",
  "description": "Add the reading time to Chrome Extension documentation articles"
}

Te klucze zawierają podstawowe metadane rozszerzenia. Określają one sposób wyświetlania rozszerzenia na stronie rozszerzeń oraz po opublikowaniu w Chrome Web Store. Jeśli chcesz dowiedzieć się więcej, sprawdź "name", "version" i "description" na Strona przeglądu pliku manifestu.

💡 Inne informacje o pliku manifestu rozszerzenia

  • Musi znajdować się w katalogu głównym projektu.
  • Jedyne wymagane klucze to "manifest_version", "name" i "version".
  • Obsługuje komentarze (//) w trakcie programowania, ale należy je usunąć przed przesłaniem kodu do Chrome Web Store.

Krok 2. Dodaj ikony

Do czego są potrzebne ikony? Choć ikony są opcjonalne na etapie tworzenia, to są opcjonalne. wymagane, jeśli planujesz dystrybuować swoje rozszerzenie w Chrome Web Store. Pojawiają się też w innych takich jak strona zarządzania rozszerzeniami.

Utwórz folder images i umieść w nim ikony. Możesz pobrać ikony na GitHub Następnie dodaj wyróżniony kod do pliku manifestu, aby zadeklarować ikony:

{
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

Zalecamy używanie plików PNG, ale dozwolone są też inne formaty plików z wyjątkiem plików SVG.

💡Gdzie wyświetlają się ikony o różnych rozmiarach?

Rozmiar ikony Zastosowanie ikony
16 × 16 Favikona na stronach i w menu kontekstowym rozszerzenia.
32 × 32 Komputery z systemem Windows często wymagają tego rozmiaru.
48 × 48 Wyświetla się na stronie Rozszerzenia.
128 × 128 Wyświetlane informacje o instalacji i w Chrome Web Store.

Krok 3. Zadeklaruj skrypt treści

Rozszerzenia mogą uruchamiać skrypty, które odczytują i modyfikują zawartość strony. Są to tak zwane treści skrypty. Użytkownicy żyją w izolowanym świecie, co oznacza, że mogą wprowadzać zmiany w środowisku JavaScript, nie kolidując ze stroną hostującą ani z innymi rozszerzeniami skrypty treści.

Dodaj do interfejsu manifest.json ten kod, aby zarejestrować skrypt treści o nazwie content.js

{
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": [
        "https://developer.chrome.com/docs/extensions/*",
        "https://developer.chrome.com/docs/webstore/*"
      ]
    }
  ]
}

Pole "matches" może mieć jeden lub więcej wzorców dopasowania. Dzięki nim przeglądarka może określać, w których witrynach należy wstawić skrypty treści. Wzorce dopasowania składają się z 3 części: <scheme>://<host><path> Mogą zawierać: „*” znaków.

💡Czy to rozszerzenie wyświetla ostrzeżenie o uprawnieniach?

Gdy użytkownik instaluje rozszerzenie, przeglądarka przekazuje mu informacje o jego możliwościach. Skrypty treści proszą o pozwolenie na uruchamianie w witrynach, które spełniają kryteria wzorca dopasowania.

W tym przykładzie użytkownik zobaczy to ostrzeżenie o uprawnieniach:

Ostrzeżenie o uprawnieniach wyświetlane użytkownikowi podczas instalowania rozszerzenia Czas odczytu
Ostrzeżenie o uprawnieniach do odczytu.

Więcej informacji o uprawnieniach rozszerzeń znajdziesz w artykule Deklarowanie uprawnień i ostrzeżenia użytkowników.

Krok 4. Oblicz i wstaw czas czytania

Skrypty treści mogą odczytywać i zmieniać model Document Object Model (DOM) zawartość strony. Rozszerzenie sprawdzi najpierw, czy strona zawiera element <article>. Następnie zliczy wszystkie słowa w tym elemencie i utworzy akapit z łączną liczbą podczas czytania.

Utwórz plik o nazwie content.js w folderze o nazwie scripts i dodaj ten kod:

const article = document.querySelector("article");

// `document.querySelector` may return null if the selector doesn't match anything.
if (article) {
  const text = article.textContent;
  const wordMatchRegExp = /[^\s]+/g; // Regular expression
  const words = text.matchAll(wordMatchRegExp);
  // matchAll returns an iterator, convert to array to get word count
  const wordCount = [...words].length;
  const readingTime = Math.round(wordCount / 200);
  const badge = document.createElement("p");
  // Use the same styling as the publish information in an article's header
  badge.classList.add("color-secondary-text", "type--caption");
  badge.textContent = `⏱️ ${readingTime} min read`;

  // Support for API reference docs
  const heading = article.querySelector("h1");
  // Support for article docs with date
  const date = article.querySelector("time")?.parentNode;

  (date ?? heading).insertAdjacentElement("afterend", badge);
}

💡 W tym kodzie użyto ciekawego kodu JavaScript

  • Zwykłe wyrażenia służące do liczenia tylko słów wewnątrz elementu <article>.
  • insertAdjacentElement() służy do wstawienia węzła czasu odczytu po elemencie.
  • Właściwość classList służąca do dodawania nazw klas CSS do atrybutu klasy elementu.
  • Opcjonalne tworzenie łańcuchów umożliwiające dostęp do właściwości obiektu, która może być niezdefiniowana lub mieć wartość null.
  • Koaleszenie zerowe zwraca wartość <heading>, jeśli <date> ma wartość null lub jest nieokreślona.

Sprawdź, czy wszystko działa

Sprawdź, czy struktura plików w projekcie wygląda tak:

Zawartość folderu manifestu czasu odczytu: manifest.json, content.js w folderze skryptów i folderu images.

Wczytywanie rozszerzenia lokalnie

Aby wczytać rozszerzenie bez pakietu w trybie programisty, wykonaj czynności opisane w sekcji Programowanie Podstawy.

Otwórz dokumentację rozszerzenia lub sklepu Chrome Web Store

Oto kilka stron, które możesz otworzyć, aby sprawdzić, ile czasu zajmie przeczytanie poszczególnych artykułów.

Powinien on wyglądać podobnie do tego:

Czas czytania widoczny na stronie powitalnej
Strona powitalna rozszerzenia z rozszerzeniem Czas czytania

🎯 Potencjalne ulepszenia

Na podstawie informacji zdobytych dzisiaj spróbuj zastosować dowolną z tych metod:

.

Rozwijaj dalej

Gratulujemy ukończenia samouczka 🎉. Rozwijaj swoje umiejętności, zdobywając samouczków w tej serii:

Rozszerzenie Czego się nauczysz
Tryb pełnej koncentracji Aby uruchomić kod na bieżącej stronie po kliknięciu działania rozszerzenia.
Menedżer kart Aby utworzyć wyskakujące okienko do zarządzania kartami przeglądarki.

Przeglądaj dalej

Mamy nadzieję, że podobało Ci się tworzenie tego rozszerzenia do Chrome i że z chęcią dalej będziesz korzystać z tej przeglądarki proces uczenia się. Zalecamy tę ścieżkę szkoleniową: