Zarządzaj kartami

Utwórz pierwszego menedżera kart.

Omówienie

Ten samouczek tworzy menedżera kart do porządkowania rozszerzenia do Chrome i kart dokumentacji Chrome Web Store.

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

W tym przewodniku objaśnimy:

  • Utwórz wyskakujące okienko rozszerzenia, korzystając z interfejsu API Action.
  • Zapytanie dotyczące określonych kart przy użyciu interfejsu API Tabs.
  • Chroń prywatność użytkowników dzięki precyzyjnym uprawnieniom dotyczącym hosta.
  • Zmiana ostrości karty.
  • Przenieś karty do tego samego okna i je pogrupuj.
  • Zmienianie nazw grup kart przy użyciu interfejsu TabGroups API.

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 tabs-manager, 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": "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 manifestu znajdziesz w samouczku czasu czytania, w którym szczegółowo opisujemy metadane i ikony rozszerzenia.

Utwórz folder images i pobierz do niego ikony.

Krok 2. Utwórz wyskakujące okienko i określ jego styl

Interfejs API Action kontroluje działanie rozszerzenia (ikona na pasku narzędzi). Gdy użytkownik kliknie działanie rozszerzenia, uruchomi kod lub otworzy wyskakujące okienko, jak w tym przypadku. Zacznij od deklarowanie 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 uruchamiać wbudowanego JavaScriptu. 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 rozszerzeniom tworzenie i modyfikowanie kart oraz wysyłanie dotyczących ich zapytań i zmieniania ich kolejności przeglądarki.

Poproś o uprawnienia

Wielu metod z interfejsu Tabs API można używać bez konieczności żądania uprawnień. Potrzebujemy jednak dostępu do elementów title i URL tych kart. te usługi poufne wymagają uprawnień. Moglibyśmy poprosić o uprawnienie "tabs", ale to zapewniłoby dostęp do poufnych właściwości wszystkich kart. Ponieważ zarządzamy tylko kartami z konkretnej witryny, prosimy o ograniczone uprawnienia hosta.

Dzięki wąskim uprawnień hosta możemy chronić prywatność użytkownika, przyznając podwyższone uprawnienia konkretnym witrynom. Spowoduje to przyznanie dostępu do usług title i URL oraz do dodatkowych funkcji. Dodaj zaznaczony kod do pliku manifest.json:

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

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

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

Uprawnienie "tabs" zapewnia rozszerzeniu możliwość odczytu danych wrażliwych na wszystkich kartach. Z czasem informacje te mogą zostać wykorzystane do gromadzenia historii przeglądania użytkownika. Jeśli więc poprosisz o przyznanie tych uprawnień, Chrome wyświetli następujące ostrzeżenie podczas instalacji:

Okno z ostrzeżeniem o uprawnieniach kart

Uprawnienia hosta umożliwiają rozszerzeniom odczytywanie poufnych właściwości pasującej karty i wysyłanie dotyczących ich zapytań, a także wstrzykiwanie na tych kartach skryptów. Podczas instalacji użytkownicy zobaczą następujący komunikat ostrzegawczy:

Okno z ostrzeżeniem o uprawnieniach hosta

Takie ostrzeżenia mogą być niepokojące dla użytkowników. Aby usprawnić proces rejestracji, zalecamy wdrożenie opcjonalnych uprawnień.

Wysyłanie zapytań dotyczących kart

Możesz pobierać karty z konkretnych adresów URL za pomocą metody tabs.query(). Utwórz popup.js i dodaj 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 okienka i inne strony rozszerzeń mogą wywoływać dowolny interfejs API Chrome, ponieważ są wyświetlane Schemat Chrome. na przykład chrome-extension://EXTENSION_ID/popup.html.

Zaznacz kartę

Najpierw rozszerzenie posortuje nazwy kart (tytuły zawartych w nim stron HTML) alfabetycznie. Następnie, gdy użytkownik kliknie element listy, zaznacz tę kartę za pomocą elementu tabs.update() i przesuń okno na wierzch za pomocą elementu 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);
...

💡 W tym kodzie użyto ciekawego kodu JavaScript

  • Collator służący do sortowania tablicy kart według języka preferowanego użytkownika.
  • Tag szablonu używany do zdefiniuj element 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 rozproszona używana do konwertowania zbioru elementów na argumenty w wywołaniu append().

Grupuj karty

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

{
  "permissions": [
    "tabGroups"
  ]
}

W usłudze popup.js dodaj ten kod, aby utworzyć przycisk, który pogrupuje wszystkie karty za pomocą znaczników tabs.group() i przenieść 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 wszystko działa

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

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

Wczytywanie rozszerzenia lokalnie

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

Otwórz kilka stron z dokumentacją

Otwórz następujące dokumenty w różnych oknach:

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

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

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

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

🎯 Potencjalne ulepszenia

Na podstawie informacji zdobytych dzisiaj spróbuj zastosować dowolną z tych metod:

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

Rozwijaj dalej!

Gratulujemy ukończenia samouczka 🎉. Rozwijaj swoje umiejętności, zdobywając kolejne samouczków w tej serii:

Rozszerzenie Czego się nauczysz
Czas czytania Automatyczne wstawianie elementu 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 podobało Ci się tworzenie tego rozszerzenia do Chrome i że z chęcią dalej będziesz korzystać z tej przeglądarki proces uczenia się. Zalecamy tę ścieżkę szkoleniową: