Aby uprościć styl bieżącej strony, kliknij ikonę paska narzędzi rozszerzenia.
Omówienie
W tym samouczku tworzymy rozszerzenie, które upraszcza styl stron dokumentacji rozszerzenia Chrome i Chrome Web Store, aby były łatwiejsze w czytaniu.
Z tego przewodnika dowiesz się, jak:
- Użyj workera rozszerzenia jako koordynatora zdarzeń.
- Zachowaj prywatność użytkowników dzięki uprawnieniu
"activeTab". - Uruchamianie kodu, gdy użytkownik kliknie ikonę paska narzędzi rozszerzenia.
- Wstawianie i usuwanie arkusza stylów za pomocą interfejsu Scripting API.
- Użyj skrótu klawiszowego, aby wykonać kod.
Zanim rozpoczniesz
W tym przewodniku zakładamy, że masz podstawowe doświadczenie w programowaniu stron internetowych. Aby zapoznać się z procesem tworzenia rozszerzeń, zalecamy obejrzenie filmu Hello World.
Tworzenie rozszerzenia
Najpierw utwórz nowy katalog o nazwie focus-mode, który będzie zawierać pliki rozszerzenia. Jeśli wolisz, możesz pobrać pełny kod źródłowy z GitHub.
Krok 1. Dodaj dane i ikony rozszerzenia
Utwórz plik o nazwie manifest.json i umieść w nim ten kod.
{
"manifest_version": 3,
"name": "Focus Mode",
"description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
Więcej informacji o tych kluczach pliku manifestu znajdziesz w samouczku „Uruchamianie skryptów na każdej karcie”, który szczegółowo omawia metadata i ikony rozszerzenia.
Utwórz folder images, a potem pobierz do niego ikony.
Krok 2. Inicjalizacja rozszerzenia
Rozszerzenia mogą monitorować zdarzenia przeglądarki w tle za pomocą workera usługi rozszerzenia. Usługi to specjalne środowiska JavaScriptu, które obsługują zdarzenia i zawieszają się, gdy nie są potrzebne.
Zacznij od zarejestrowania skryptu service worker w pliku manifest.json:
{
...
"background": {
"service_worker": "background.js"
},
...
}
Utwórz plik o nazwie background.js i dodaj do niego ten kod:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
Pierwszym zdarzeniem, na które będzie nasłuchiwać nasz serwis worker, jest runtime.onInstalled(). Ta metoda umożliwia rozszerzeniu ustawienie początkowego stanu lub wykonanie niektórych zadań podczas instalacji. Rozszerzenia mogą używać interfejsu Storage API i IndexedDB do przechowywania stanu aplikacji. W tym przypadku, ponieważ obsługujemy tylko 2 stany, do śledzenia, czy rozszerzenie jest włączone czy wyłączone, użyjemy tekstu plakietki działania.
Krok 3. Włącz działanie rozszerzenia
Działanie rozszerzenia steruje ikoną rozszerzenia na pasku narzędzi. Gdy użytkownik kliknie ikonę rozszerzenia, zostanie uruchomiony kod (jak w tym przykładzie) lub wyświetlone wyskakujące okienko. Dodaj ten kod, aby zadeklarować działanie rozszerzenia w pliku manifest.json:
{
...
"action": {
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
...
}
Ochrona prywatności użytkowników dzięki uprawnieniu activeTab
Uprawnienie activeTab daje rozszerzeniu tymczasową możliwość wykonywania kodu na aktywnej karcie. Umożliwia też dostęp do właściwości wrażliwych na bieżącej karcie.
To uprawnienie jest włączone, gdy użytkownik wywołuje rozszerzenie. W tym przypadku użytkownik uruchamia rozszerzenie, klikając jego działanie.
💡 Jakie inne interakcje użytkownika umożliwiają w moim rozszerzeniu uprawnienia activeTab?
- naciśnięcie kombinacji klawiszy;
- Wybieranie pozycji menu kontekstowego
- Akceptowanie sugestii z szukarki.
- otwieranie wyskakującego okienka rozszerzenia,
Uprawnienie "activeTab" pozwala użytkownikom celowo uruchomić rozszerzenie na aktywnej karcie, co chroni ich prywatność. Kolejną zaletą jest to, że nie powoduje ostrzeżenia o wymaganych uprawnieniach.
Aby użyć uprawnienia "activeTab", dodaj je do tablicy uprawnień w pliku manifestu:
{
...
"permissions": ["activeTab"],
...
}
Krok 4. Śledź stan bieżącej karty
Gdy użytkownik kliknie działanie rozszerzenia, rozszerzenie sprawdzi, czy adres URL pasuje do strony dokumentacji. Następnie sprawdza stan bieżącej karty i ustawia następny stan. Dodaj do pliku background.js ten kod:
const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';
chrome.action.onClicked.addListener(async (tab) => {
if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
// Retrieve the action badge to check if the extension is 'ON' or 'OFF'
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
// Next state will always be the opposite
const nextState = prevState === 'ON' ? 'OFF' : 'ON';
// Set the action badge to the next state
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState,
});
}
});
Krok 5. Dodaj lub usuń arkusz stylów
Teraz pora zmienić układ strony. Utwórz plik o nazwie focus-mode.css i dodaj do niego ten kod:
* {
display: none !important;
}
html,
body,
*:has(article),
article,
article * {
display: revert !important;
}
[role='navigation'] {
display: none !important;
}
article {
margin: auto;
max-width: 700px;
}
Wstaw lub usuń arkusz stylów za pomocą interfejsu Scripting API. Najpierw zadeklaruj uprawnienie "scripting" w pliku manifestu:
{
...
"permissions": ["activeTab", "scripting"],
...
}
Na koniec w pliku background.js dodaj ten kod, aby zmienić układ strony:
...
if (nextState === "ON") {
// Insert the CSS file when the user turns the extension on
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
} else if (nextState === "OFF") {
// Remove the CSS file when the user turns the extension off
await chrome.scripting.removeCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
}
}
});
💡 Czy zamiast arkusza stylów mogę użyć interfejsu Scripting API do wstawiania kodu?
Tak. Do wstrzykiwania kodu JavaScript możesz użyć scripting.executeScript().
Opcjonalnie: przypisz skrót klawiszowy
Dla zabawy dodaj skrót, który ułatwi włączanie i wyłączanie trybu pełnej koncentracji. Dodaj klucz "commands" do pliku manifestu.
{
...
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+B",
"mac": "Command+B"
}
}
}
}
Klucz "_execute_action" uruchamia ten sam kod co zdarzenie action.onClicked(), więc nie musisz dodawać dodatkowego kodu.
Sprawdzanie działania
Sprawdź, czy struktura plików projektu wygląda tak:
Ładowanie rozszerzenia lokalnie
Aby załadować rozpakowane rozszerzenie w trybie programisty, wykonaj czynności opisane w artykule Hello World.
Testowanie rozszerzenia na stronie dokumentacji
Najpierw otwórz jedną z tych stron:
Następnie kliknij działanie rozszerzenia. Jeśli skonfigurujesz skrót klawiszowy, możesz go przetestować, naciskając Ctrl + B lub Cmd + B.
Powinien on wyglądać tak:
Do tego:
🎯 Możliwe ulepszenia
Na podstawie tego, czego się nauczyłeś(-aś) dzisiaj, spróbuj wykonać jedną z tych czynności:
- Ulepszyć arkusz stylów CSS.
- Przypisz inny skrót klawiszowy.
- zmienić układ ulubionego bloga lub witryny z dokumentacją;
i nadal rozwijaj swój kanał.
Gratulujemy ukończenia tego samouczka. 🎉 Aby dalej rozwijać swoje umiejętności, ukończ inne samouczki z tej serii:
| Rozszerzenie | Czego się nauczysz |
|---|---|
| Czas czytania | Aby automatycznie wstawić element na określonym zestawie stron. |
| Menedżer kart | Aby utworzyć wyskakujące okienko do zarządzania kartami przeglądarki. |
Przeglądaj dalej
Mamy nadzieję, że tworzenie tego rozszerzenia Chrome sprawiło Ci przyjemność. Z niecierpliwością czekamy na dalsze postępy w Twojej drodze do opanowania sztuki tworzenia rozszerzeń. Zalecamy te ścieżki szkoleniowe:
- Przewodnik dla deweloperów zawiera dziesiątki dodatkowych linków do fragmentów dokumentacji dotyczących zaawansowanego tworzenia rozszerzeń.
- Rozszerzenia mają dostęp do zaawansowanych interfejsów API, których nie ma w otwartej sieci. W dokumentacji interfejsów API Chrome znajdziesz opis każdego z nich.