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.
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:
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:
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:
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:
- Zaprojektuj interfejs
- Odkrywanie w Chrome Web Store
- Omówienie tworzenia rozszerzeń
- Format pliku manifestu
- Publikowanie w Chrome Web Store
Kliknij wyskakujące okienko. Powinien on wyglądać podobnie do tego:
Kliknij przycisk „Grupuj karty”. Powinien on wyglądać podobnie do tego:
🎯 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.