Uprość styl bieżącej strony, klikając ikonę rozszerzenia na pasku narzędzi.
Opis
W tym samouczku tworzymy rozszerzenie, które upraszcza styl rozszerzenia do Chrome i stron dokumentacji Chrome Web Store, aby były bardziej czytelne.
W tym przewodniku objaśnimy, jak to zrobić:
- używać skryptu service worker rozszerzeń jako koordynatora zdarzenia.
- Chroń prywatność użytkowników dzięki uprawnieniom
"activeTab". - Uruchom kod, gdy użytkownik kliknie ikonę rozszerzenia na pasku narzędzi.
- Możesz wstawić i usunąć arkusz stylów za pomocą interfejsu Scripting API.
- Do wykonywania kodu używaj skrótu klawiszowego.
Zanim zaczniesz
W tym przewodniku zakładamy, że masz podstawowe doświadczenie w tworzeniu stron internetowych. Na stronie Hello World warto zapoznać się z procesem tworzenia rozszerzeń.
Tworzenie rozszerzenia
Na początek utwórz nowy katalog o nazwie focus-mode, w którym będą przechowywane 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 poniższy 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 manifestu znajdziesz w samouczku „Uruchamianie skryptów na każdej karcie”, w którym bardziej szczegółowo wyjaśniamy metadane i ikony rozszerzenia.
Utwórz folder images, a następnie pobierz do niego ikony.
Krok 2. Zainicjuj rozszerzenie
Rozszerzenia mogą monitorować zdarzenia przeglądarki w tle za pomocą skryptu service worker rozszerzenia. Skrypty service worker to specjalne środowiska JavaScript, które obsługują zdarzenia i kończą 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",
});
});
Pierwsze zdarzenie nasłuchiwane przez skrypt service worker to runtime.onInstalled(). Ta metoda umożliwia rozszerzeniu ustawienie stanu początkowego lub wykonanie niektórych zadań związanych z instalacją. Rozszerzenia mogą używać interfejsu Storage API i IndexedDB do przechowywania stanu aplikacji. W tym przypadku, ponieważ obsługujemy tylko 2 stany, użyjemy tekstu plakietki akcji, aby sprawdzić, czy rozszerzenie jest włączone czy wyłączone.
Krok 3. Włącz działanie rozszerzenia
To działanie rozszerzenia określa ikonę rozszerzenia na pasku narzędzi. Za każdym razem, gdy użytkownik kliknie tę ikonę, uruchomi kod (jak w tym przykładzie) lub wyświetli 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"
}
},
...
}
Aby chronić prywatność użytkowników, używaj uprawnienia ActiveTab
Uprawnienie activeTab daje rozszerzeniu możliwość tymczasowego wykonywania kodu na aktywnej karcie. Umożliwia też dostęp do właściwości poufnych bieżącej karty.
To uprawnienie jest włączane, gdy użytkownik wywołuje rozszerzenie. W tym przypadku użytkownik wywołuje rozszerzenie, klikając jego działanie.
💡 Jakie inne interakcje użytkowników z moim rozszerzeniem powodują włączenie uprawnień do aktywnych kart?
- Naciśnięcie kombinacji skrótów klawiszowych.
- Wybranie elementu menu kontekstowego.
- Akceptowanie sugestii z omniboksu.
- Otwieram wyskakujące okienko rozszerzenia.
Uprawnienie "activeTab" pozwala użytkownikom celowo uruchamiać rozszerzenie na wybranej karcie. W ten sposób chroni prywatność użytkowników. Inną zaletą jest to, że nie powoduje wyświetlania ostrzeżenia o uprawnieniach.
Aby użyć uprawnienia "activeTab", dodaj je do tablicy uprawnień w pliku manifestu:
{
...
"permissions": ["activeTab"],
...
}
Krok 4. Śledzenie stanu bieżącej karty
Gdy użytkownik kliknie rozszerzenie, sprawdzi ono, czy adres URL odpowiada stronie dokumentacji. Następnie sprawdzi stan bieżącej karty i ustawi następny. Dodaj do adresu 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 czas zmienić układ strony. Utwórz plik o nazwie focus-mode.css i umieść w nim ten kod:
body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
main > :not(:last-child),
main > :last-child > navigation-tree,
main .toc-container {
display: none;
}
main > :last-child {
margin-top: min(10vmax, 10rem);
margin-bottom: min(10vmax, 10rem);
}
Wstaw lub usuń arkusz stylów za pomocą interfejsu Scripting API. Zacznij od zadeklarowania uprawnienia "scripting" w pliku manifestu:
{
...
"permissions": ["activeTab", "scripting"],
...
}
Na koniec w interfejsie background.js dodaj następujący 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 mogę użyć interfejsu Scripting API, aby wstawić kod zamiast arkusza stylów?
Tak. Do wstrzyknięcia JavaScriptu możesz użyć scripting.executeScript().
Opcjonalnie: przypisywanie skrótu klawiszowego
Dla zabawy dodaj skrót, który ułatwia włączanie i wyłączanie trybu pełnej koncentracji. Dodaj do pliku manifestu klucz "commands".
{
...
"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 jest potrzebny dodatkowy kod.
Sprawdź, czy to działa
Sprawdź, czy struktura pliku projektu wygląda tak:
Wczytaj rozszerzenie lokalnie
Aby wczytać w trybie programisty rozszerzenie bez pakietu, wykonaj czynności opisane w artykule Hello World.
Testowanie rozszerzenia na stronie dokumentacji
Najpierw otwórz dowolną z tych stron:
Następnie kliknij działanie związane z rozszerzeniem. Jeśli masz skonfigurowany skrót klawiszowy, możesz go przetestować, naciskając Ctrl + B lub Cmd + B.
Powinien wyglądać tak:
Aby to zrobić:
🎯 Potencjalne ulepszenia
Na podstawie tego, czego się dzisiaj dowiesz, spróbuj wykonać którąś z tych czynności:
- Ulepszenie arkusza stylów CSS.
- Przypisz inny skrót klawiszowy.
- Zmień układ ulubionego bloga lub witryny z dokumentacją.
i nadal rozwijaj swój kanał.
Gratulujemy ukończenia tego samouczka 🎉. Rozwijaj swoje umiejętności, korzystając z innych samouczków 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 podobało Ci się tworzenie tego rozszerzenia do Chrome i chcesz kontynuować naukę jego tworzenia. Zalecamy skorzystanie z tych ścieżek szkoleniowych:
- Przewodnik dla programistów zawiera dziesiątki dodatkowych linków do dokumentacji dotyczącej zaawansowanego tworzenia rozszerzeń.
- Rozszerzenia mają dostęp do zaawansowanych interfejsów API poza tymi, które są dostępne w otwartym internecie. W dokumentacji interfejsów API Chrome omówione są poszczególne interfejsy API.