Zarządzanie kartami

Utwórz pierwszego menedżera kart.

Przegląd

W tym samouczku utworzysz menedżera kart, który pomoże Ci uporządkować karty z dokumentacją rozszerzeń do Chrome i sklepu Chrome Web Store.

Wyskakujące okienko rozszerzenia Menedżer kart
Rozszerzenie Tabs Manager

Z tego przewodnika dowiesz się, jak:

  • Utwórz wyskakujące okienko rozszerzenia za pomocą interfejsu Action API.
  • Wyszukuj konkretne karty za pomocą interfejsu Tabs API.
  • Chroń prywatność użytkowników dzięki ograniczonym uprawnieniom do hosta.
  • Zmień zaznaczenie karty.
  • Przenieś karty do tego samego okna i zgrupuj je.
  • Zmień nazwy grup kart za pomocą interfejsu TabGroups API.

Zanim rozpoczniesz

W tym przewodniku zakładamy, że masz podstawowe doświadczenie w tworzeniu stron internetowych. Aby zapoznać się z procesem tworzenia rozszerzeń, przeczytaj artykuł Hello World.

Tworzenie rozszerzenia

Na początek utwórz nowy katalog o nazwie tabs-manager, 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 dodaj ten kod:

{
  "manifest_version": 3,
  "name": "Tab Manager for Chrome Dev Docs",
  "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 dotyczącym czasu czytania, w którym szczegółowo wyjaśniono metadane i ikony rozszerzenia.

Utwórz folder images, a następnie pobierz do niego ikony.

Krok 2. Utwórz i sformatuj wyskakujące okienko

Interfejs Action API kontroluje działanie rozszerzenia (ikonę na pasku narzędzi). Gdy użytkownik kliknie działanie rozszerzenia, uruchomi się kod lub otworzy się wyskakujące okienko, jak w tym przypadku. Zacznij od zadeklarowania wyskakującego okienka w manifest.json:

{
  "action": {
    "default_popup": "popup.html"
  }
}

Wyskakujące okienko jest podobne do strony internetowej, z tym wyjątkiem, że nie może uruchamiać wbudowanego kodu JavaScript. Utwórz plik popup.html i dodaj ten kod:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./popup.css" />
  </head>
  <body>
    <template id="li_template">
      <li>
        <a>
          <h3 class="title">Tab Title</h3>
          <p class="pathname">Tab Pathname</p>
        </a>
      </li>
    </template>

    <h1>Google Dev Docs</h1>
    <button>Group Tabs</button>
    <ul></ul>

    <script src="./popup.js" type="module"></script>
  </body>
</html>

Następnie dostosujesz styl wyskakującego okienka. Utwórz plik popup.css i dodaj ten kod:

body {
  width: 20rem;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin: 1rem 0;
}

li {
  padding: 0.25rem;
}
li:nth-child(odd) {
  background: #80808030;
}
li:nth-child(even) {
  background: #ffffff;
}

h3,
p {
  margin: 0;
}

Krok 3. Zarządzaj kartami

Interfejs Tabs API umożliwia rozszerzeniu tworzenie, wysyłanie zapytań, modyfikowanie i przenoszenie kart w przeglądarce.

Poproś o dostęp

Wielu metod w interfejsie Tabs API można używać bez żądania uprawnień. Potrzebujemy jednak dostępu do title i URL kart. Te dane wrażliwe wymagają uprawnień. Możemy poprosić o uprawnienie "tabs", ale dałoby to dostęp do informacji wrażliwych na wszystkich kartach. Ponieważ zarządzamy tylko kartami konkretnej witryny, poprosimy o ograniczone uprawnienia hosta.

Ograniczone uprawnienia hosta pozwalają nam chronić prywatność użytkowników, przyznając rozszerzone uprawnienia określonym witrynom. Umożliwi to dostęp do właściwości title i URL, a także do dodatkowych funkcji. Dodaj do pliku manifest.json wyróżniony kod:

{
  "host_permissions": [
    "https://developer.chrome.com/*"
  ]
}

💡 Jakie są główne różnice między uprawnieniem tabs a uprawnieniami hosta?

Zarówno uprawnienie "tabs", jak i uprawnienia hosta mają wady.

Uprawnienie "tabs" umożliwia rozszerzeniu odczytywanie danych wrażliwych na wszystkich kartach. Z czasem te informacje mogą być wykorzystywane do zbierania historii przeglądania użytkownika. Dlatego jeśli poprosisz o to uprawnienie, Chrome wyświetli podczas instalacji ten komunikat ostrzegawczy:

Okno z ostrzeżeniem dotyczącym uprawnień do kart

Uprawnienia hosta umożliwiają rozszerzeniu odczytywanie i wysyłanie zapytań dotyczących informacji poufnych na pasującej karcie oraz wstrzykiwanie na niej skryptów. Podczas instalacji użytkownicy zobaczą ten komunikat ostrzegawczy:

Okno z ostrzeżeniem dotyczącym uprawnień hosta

Te ostrzeżenia mogą niepokoić użytkowników. Aby ułatwić użytkownikom rozpoczęcie korzystania z aplikacji, zalecamy wdrożenie opcjonalnych uprawnień.

Wykonywanie zapytań dotyczących kart

Karty z określonych adresów URL możesz pobrać za pomocą metody tabs.query(). Utwórz plik popup.js i dodaj do niego ten kod:

const tabs = await chrome.tabs.query({
  url: [
    "https://developer.chrome.com/docs/webstore/*",
    "https://developer.chrome.com/docs/extensions/*",
  ]
});

💡 Czy mogę używać interfejsów API Chrome bezpośrednio w wyskakującym okienku?

Wyskakujące okienko i inne strony rozszerzenia mogą wywoływać dowolny interfejs API Chrome, ponieważ są obsługiwane ze schematu chrome. Na przykład chrome-extension://EXTENSION_ID/popup.html.

Zaznaczanie karty

Najpierw rozszerzenie posortuje alfabetycznie nazwy kart (tytuły zawartych na nich stron HTML). Następnie, gdy klikniesz element listy, zostanie on zaznaczony za pomocą tabs.update(), a okno zostanie przeniesione na pierwszy plan za pomocą windows.update(). Dodaj do pliku popup.js ten kod:

...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));

const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
  const element = template.content.firstElementChild.cloneNode(true);

  const title = tab.title.split("-")[0].trim();
  const pathname = new URL(tab.url).pathname.slice("/docs".length);

  element.querySelector(".title").textContent = title;
  element.querySelector(".pathname").textContent = pathname;
  element.querySelector("a").addEventListener("click", async () => {
    // need to focus window as well as the active tab
    await chrome.tabs.update(tab.id, { active: true });
    await chrome.windows.update(tab.windowId, { focused: true });
  });

  elements.add(element);
}
document.querySelector("ul").append(...elements);
...

💡 Ciekawy kod JavaScript użyty w tym przykładzie

  • Obiekt Collator używany do sortowania tablicy kart według preferowanego języka użytkownika.
  • Tag szablonu używany do definiowania elementu HTML, który można sklonować zamiast używać document.createElement() do tworzenia każdego elementu.
  • Konstruktor adresów URL służy do tworzenia i parsowania adresów URL.
  • Składnia rozszerzenia używana do przekształcania zbioru elementów w argumenty w wywołaniu append().

Grupowanie kart

Interfejs TabGroups API umożliwia rozszerzeniu nadanie nazwy grupie i wybranie koloru tła. Dodaj uprawnienie "tabGroups" do pliku manifestu, dodając wyróżniony kod:

{
  "permissions": [
    "tabGroups"
  ]
}

W popup.js dodaj ten kod, aby utworzyć przycisk, który zgrupuje wszystkie karty za pomocą tabs.group() i przeniesie je do bieżącego okna.

const button = document.querySelector("button");
button.addEventListener("click", async () => {
  const tabIds = tabs.map(({ id }) => id);
  if (tabIds.length) {
    const group = await chrome.tabs.group({ tabIds });
    await chrome.tabGroups.update(group, { title: "DOCS" });
  }
});

Sprawdzanie działania

Sprawdź, czy struktura plików projektu jest zgodna z tym drzewem katalogów:

Zawartość folderu menedżera kart: manifest.json, popup.js, popup.css, popup.html i folder z obrazami.

Wczytywanie rozszerzenia lokalnie

Aby załadować rozpakowane rozszerzenie w trybie programisty, wykonaj czynności opisane w sekcji Hello World.

Otwórz kilka stron dokumentacji

Otwórz te dokumenty w różnych oknach:

Kliknij wyskakujące okienko. Powinien on wyglądać podobnie do tego:

Wyskakujące okienko rozszerzenia Menedżer kart
Wyskakujące okienko rozszerzenia Menedżer kart

Kliknij przycisk „Grupuj karty”. Powinien on wyglądać podobnie do tego:

Menedżer kart – zgrupowane karty
Grupowanie kart za pomocą rozszerzenia Menedżer kart

🎯 Potencjalne ulepszenia

Na podstawie zdobytej dziś wiedzy spróbuj wdrożyć dowolne z tych rozwiązań:

  • Dostosuj arkusz stylów wyskakującego okienka.
  • Zmień kolor i tytuł grupy kart.
  • zarządzać kartami innej witryny z dokumentacją;
  • Dodaliśmy obsługę rozgrupowywania zgrupowanych kart.

Nie przestawaj budować!

Gratulujemy ukończenia tego samouczka 🎉. Rozwijaj dalej swoje umiejętności, korzystając z innych samouczków z tej serii:

Rozszerzenie Czego się nauczysz
Czas czytania Aby automatycznie wstawiać element na każdej stronie.
Tryb pełnej koncentracji Uruchamia kod na bieżącej stronie po kliknięciu działania rozszerzenia.

Przeglądaj dalej

Mamy nadzieję, że tworzenie tego rozszerzenia do Chrome było dla Ciebie przyjemnością i że z entuzjazmem będziesz kontynuować naukę tworzenia rozszerzeń do Chrome. Zalecamy tę ścieżkę szkoleniową:

  • W przewodniku dla deweloperów znajdziesz dziesiątki dodatkowych linków do dokumentacji przydatnej przy tworzeniu zaawansowanych rozszerzeń.
  • Rozszerzenia mają dostęp do zaawansowanych interfejsów API, które nie są dostępne w otwartej sieci. Dokumentacja interfejsów API Chrome zawiera opis każdego interfejsu API.