Wstaw skrypty na aktywnej karcie

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:

Zawartość folderu trybu pełnej koncentracji: manifest.json, background.js, włączona-mode.css i folder images.

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
Rozszerzenie trybu pełnej koncentracji wyłączone

Aby to zrobić:

Rozszerzenie Trybu pełnej koncentracji WŁĄCZONE
Rozszerzenie Tryb pełnej koncentracji włączone

🎯 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: