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