Zarządzaj kartami

Utwórz pierwszego menedżera kart.

Opis

W tym samouczku tworzymy menedżera kart do porządkowania kart rozszerzenia do Chrome i kart dokumentacji Chrome Web Store.

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

W tym przewodniku objaśnimy, jak to zrobić:

  • Utwórz wyskakujące okienko rozszerzenia za pomocą interfejsu API Action.
  • Wysyłanie zapytań dotyczących określonych kart za pomocą interfejsu Tabs API.
  • Chroń prywatność użytkowników dzięki wąskim uprawnieniom hosta.
  • Zmiana zaznaczenia karty.
  • Przenieś karty do tego samego okna i pogrupuj je.
  • Nazwy grup kart możesz zmieniać za pomocą interfejsu TabGroups API.

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 tabs-manager, w którym będą przechowywane pliki rozszerzenia. Pełny kod źródłowy możesz pobrać 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": "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"
  }
}

Aby dowiedzieć się więcej o tych kluczach manifestu, zapoznaj się z samouczkiem Czas odczytu, 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. Utwórz wyskakujące okienko i określ jego styl

Interfejs Action API steruje działaniem rozszerzenia (ikona na pasku narzędzi). Gdy użytkownik kliknie rozszerzenie, uruchomi kod lub otworzy 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 jednym wyjątkiem: nie może obsługiwać wbudowanego kodu JavaScript. Utwórz plik popup.html i dodaj do niego 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 określ styl wyskakującego okienka. Utwórz plik popup.css i dodaj do niego 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 i modyfikowanie kart oraz zmienianie ich kolejności w przeglądarce.

Poproś o uprawnienia

Wiele metod interfejsu Tabs API można używać bez wysyłania próśb o zgodę. Potrzebujemy jednak dostępu do title i URL kart. Te właściwości poufne wymagają uprawnień. Mogliśmy poprosić o uprawnienie "tabs", ale zapewniłoby to dostęp do poufnych właściwości wszystkich kart. Ponieważ zarządzamy tylko kartami w konkretnej witrynie, prosimy o zawężone uprawnienia hosta.

Niewielkie uprawnienia hosta pozwalają nam chronić prywatność użytkowników przez przyznawanie podwyższonych uprawnień określonym witrynom. Spowoduje to przyznanie dostępu do usług title i URL oraz do dodatkowych możliwości. Dodaj zaznaczony kod do pliku manifest.json:

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

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

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

Uprawnienie "tabs" umożliwia rozszerzeniu odczytywanie danych wrażliwych na wszystkich kartach. Informacje te mogą z czasem służyć do gromadzenia historii przeglądania. Jeśli więc poprosisz o przyznanie tych uprawnień, podczas instalacji Chrome wyświetli ten komunikat ostrzegawczy:

Okno z ostrzeżeniem o uprawnieniach do kart

Uprawnienia dotyczące hosta umożliwiają rozszerzeniu odczytywanie poufnych właściwości pasującej karty i wykonywanie na nich zapytań, a także wstawianie skryptów na tych kartach. Podczas instalacji użytkownicy zobaczą następujący komunikat ostrzegawczy:

Okno z ostrzeżeniem dotyczącym uprawnień hosta

Takie ostrzeżenia mogą niepokoić użytkowników. Aby ułatwić sobie wprowadzenie, zalecamy wdrożenie uprawnień opcjonalnych.

Tworzenie zapytań dotyczących kart

Możesz pobrać karty z określonych adresów URL 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 rozszerzeń mogą wywoływać dowolny interfejs Chrome API, ponieważ są one wyświetlane ze schematu Chrome. Na przykład chrome-extension://EXTENSION_ID/popup.html.

Zaznacz kartę

Najpierw rozszerzenie sortuje alfabetycznie nazwy kart (tytuły zawartych stron HTML). Po kliknięciu elementu listy zostanie ona uaktywniona na tej karcie za pomocą funkcji tabs.update() i użyje opcji windows.update(), aby przesunąć okno na wierzch. 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);
...

💡 W tym kodzie użyto ciekawego kodu JavaScript

  • Collator używany do sortowania tablicy kart według języka preferowanego użytkownika.
  • Tag szablonu używany do definiowania elementu HTML, który można sklonować, zamiast używać document.createElement() do tworzenia poszczególnych elementów.
  • Konstruktor adresów URL używany do tworzenia i analizowania adresów URL.
  • Składnia Spread, która służy do konwertowania zbioru elementów na argumenty w wywołaniu append().

Grupuj karty

Interfejs TabGroups API pozwala rozszerzeniu nazwać grupę i wybrać kolor tła. Dodaj do pliku manifestu uprawnienie "tabGroups", dodając zaznaczony 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" });
  }
});

Sprawdź, czy to działa

Sprawdź, czy struktura plików projektu odpowiada temu drzewowi katalogów:

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

Wczytaj rozszerzenie lokalnie

Aby wczytać w trybie programisty rozszerzenie bez pakietu, wykonaj czynności opisane w artykule Hello World.

Otwórz kilka stron z dokumentacją

Otwieraj 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żera kart

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

Pogrupowane karty w Menedżerze kart
Zgrupowane karty za pomocą rozszerzenia Menedżer kart

🎯 Potencjalne ulepszenia

Opierając się na zdobytych dzisiaj umiejętnościach, spróbuj zastosować którąś z tych metod:

  • Dostosuj arkusz stylów w wyskakującym okienku.
  • Zmień kolor i tytuł grupy kart.
  • Zarządzanie kartami innej witryny z dokumentacją.
  • Dodano obsługę rozgrupowania zgrupowanych kart.

Twórz dalej!

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 każdej stronie.
Tryb pełnej koncentracji Aby uruchomić kod na bieżącej stronie po kliknięciu działania rozszerzenia.

Przeglądaj dalej

Mamy nadzieję, że tworzenie tego rozszerzenia do Chrome podobało Ci się i chcesz kontynuować naukę w zakresie programowania. Zalecamy skorzystanie z tej ścieżki szkoleniowej:

  • 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.