Uprość styl bieżącej strony, klikając ikonę rozszerzenia na pasku narzędzi.
Omówienie
W tym samouczku tworzymy rozszerzenie, które upraszcza określanie stylu rozszerzenia do Chrome strony dokumentacji Chrome Web Store, dzięki czemu będą czytelniejsze.
W tym przewodniku objaśnimy:
- Użyj skryptu usługi rozszerzenia jako koordynatora wydarzenia.
- Chroń prywatność użytkowników dzięki uprawnieniom
"activeTab"
. - Uruchamiaj kod, gdy użytkownik kliknie ikonę rozszerzenia na pasku narzędzi.
- Wstaw i usuń arkusz stylów za pomocą interfejsu API Scripting.
- Użyj skrótu klawiszowego do uruchomienia kodu.
Zanim rozpoczniesz
W tym przewodniku zakładamy, że masz już podstawowe doświadczenie w tworzeniu stron internetowych. Zalecamy zapłacenie Hello World, aby zapoznać się z wprowadzeniem do przepływu pracy 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
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 dodaj do niego 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 manifestu znajdziesz w artykule „Uruchamianie skryptów na każdej karcie” wyjaśniający szczegółowo metadane i ikony rozszerzenia.
Utwórz folder images
i pobierz do niego ikony.
Krok 2. Zainicjuj rozszerzenie
Rozszerzenia mogą monitorować zdarzenia przeglądarki w tle za pomocą usługi rozszerzenia . Skrypty service worker to specjalne środowiska JavaScript, które obsługują 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, którego będzie wykrywać nasz skrypt service worker, to:
runtime.onInstalled()
Ta metoda umożliwia rozszerzeniu ustawienie początkowego
lub wykonać jakieś zadania podczas instalacji. Rozszerzenia mogą używać interfejsu Storage API oraz
IndexedDB do przechowywania stanu aplikacji. Ponieważ jednak w tym przypadku obsługujemy tylko dwa stany, użyjemy tekstu plakietki działania, by sprawdzić, czy rozszerzenie jest włączone. lub „WYŁĄCZONE”.
Krok 3. Włącz działanie rozszerzenia
Działanie rozszerzenia kontroluje ikonę rozszerzenia na pasku narzędzi. Za każdym razem, gdy użytkownik kliknie
spowoduje uruchomienie kodu (jak w tym przykładzie) lub wyświetlenie wyskakującego okienka. Dodaj parametr
ten kod, by zadeklarować w pliku manifest.json
działanie rozszerzenia:
{
...
"action": {
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
...
}
Korzystanie z uprawnienia ActiveTab w celu ochrony prywatności użytkowników
Uprawnienie activeTab
zapewnia rozszerzeniu tymczasowe możliwość wykonania kodu
na aktywnej karcie. Zapewnia też dostęp do poufnych właściwości
bieżącej karcie.
To uprawnienie jest włączane, gdy użytkownik wywoła rozszerzenie. W takim przypadku użytkownik wywołuje metodę kliknij jego działanie.
💡 Jakie inne interakcje użytkowników włączają uprawnienia ActiveTab w moim rozszerzeniu?
- Naciśnięcie kombinacji skrótów klawiszowych.
- wybierając element menu kontekstowego.
- Przyjmowanie sugestii z omniboksu.
- Otwieram wyskakujące okienko rozszerzenia.
Uprawnienie "activeTab"
pozwala użytkownikom celowo uruchamiać rozszerzenie w
zaznaczona karta; w ten sposób chroni prywatność użytkownika. Inną zaletą jest to, że
wyświetlić ostrzeżenie o uprawnieniach.
Aby używać uprawnienia "activeTab"
, dodaj je do tablicy uprawnień pliku manifestu:
{
...
"permissions": ["activeTab"],
...
}
Krok 4. Śledź stan bieżącej karty
Gdy użytkownik kliknie działanie rozszerzenia, sprawdzi ono, czy adres URL pasuje do
stronie dokumentacji. Następnie sprawdzi stan bieżącej karty i ustawi następny. Dodaj parametr
ten kod do background.js
:
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 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 API Scripting. Zacznij od
zadeklarowanie w pliku manifestu uprawnienia "scripting"
:
{
...
"permissions": ["activeTab", "scripting"],
...
}
Na koniec w 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 do wstrzykiwania kodu zamiast arkusza stylów?
Tak. Możesz użyć scripting.executeScript()
do wstrzykiwania JavaScriptu.
Opcjonalnie: przypisywanie skrótu klawiszowego
Dla zabawy dodaj skrót, który ułatwi włączanie i wyłączanie trybu pełnej koncentracji. Dodaj parametr
"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 ma dodatkowych
Potrzebny jest kod.
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 artykule Hello World.
Testowanie rozszerzenia na stronie dokumentacji
Najpierw otwórz jedną z tych stron:
Następnie kliknij działanie rozszerzenia. Jeśli masz skonfigurowany skrót klawiszowy, możesz go przetestować, naciskając Ctrl + B
lub Cmd + B
.
Powinien wyglądać tak:
![Rozszerzenie trybu pełnej koncentracji WYŁĄCZONE](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/scripts-activetab/image/focus-mode-extension-off-dc8f9326aa92b.png?authuser=0000&hl=pl)
Aby to zrobić:
![Rozszerzenie Trybu pełnej koncentracji WŁĄCZONE](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/scripts-activetab/image/focus-mode-extension-on-c248a59b498ea.png?authuser=0000&hl=pl)
🎯 Potencjalne ulepszenia
Na podstawie tego, czego się dziś nauczysz, spróbuj wykonać jedną z tych czynności:
- Ulepsz arkusz 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 samouczka 🎉. Zdobywaj kolejne umiejętności i zdobywaj kolejne samouczków w tej serii:
Rozszerzenie | Czego się nauczysz |
---|---|
Czas czytania | Aby automatycznie wstawić element w 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 że chcesz dalej go używać proces uczenia się. Zalecamy te ścieżki szkoleniowe:
- 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.