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](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/reading-extension-the-e-0070620f12665.png?authuser=19&hl=pl)
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](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/permission-warning-user-af0cb023a0128.png?authuser=19&hl=pl)
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:
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](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/reading-running-the-wel-1d750346edcea.png?authuser=19&hl=pl)
🎯 Potencjalne ulepszenia
Na podstawie informacji zdobytych dzisiaj spróbuj zastosować dowolną z tych metod:
- Dodaj kolejny wzorzec dopasowania do pliku manifest.json, aby pomóc innego dewelopera Chrome. takich jak Narzędzia deweloperskie w Chrome czy Workbox.
- Dodaj nowy skrypt treści, który oblicza czas czytania do dowolnego z Twoich ulubionych blogów lub witryn z dokumentacją.
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ą:
- Przewodnik dla programistów zawiera dziesiątki dodatkowych linków do dokumentacji istotne przy tworzeniu rozszerzeń zaawansowanych.
- Rozszerzenia mają dostęp do zaawansowanych interfejsów API poza tymi dostępnymi w otwartej sieci. W dokumentacji interfejsów API Chrome opisujemy poszczególne interfejsy API.