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](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-725ac725aaa4d.png?authuser=8&hl=pl)
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:
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:
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:
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:
- Projektowanie interfejsu
- Odkrywanie w Chrome Web Store
- Omówienie tworzenia rozszerzeń
- Format pliku manifestu
- Opublikuj w Chrome Web Store
Kliknij wyskakujące okienko. Powinien on wyglądać podobnie do tego:
![Wyskakujące okienko rozszerzenia Menedżera kart](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-f958d72e1a9ae.png?authuser=8&hl=pl)
Kliknij „Grupuj karty”. Przycisk Powinien on wyglądać podobnie do tego:
![Zgrupowane karty w Menedżerze kart](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-grouped-tabs-65bdf282bdf98.png?authuser=8&hl=pl)
🎯 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ą:
- Przewodnik dla programistów zawiera dziesiątki dodatkowych linków do dokumentacji istotne przy tworzeniu rozszerzeń zaawansowanych.
- Rozszerzenia mają dostęp do zaawansowanych interfejsów API poza tymi dostępnymi w otwartej sieci. W dokumentacji interfejsów API Chrome opisujemy poszczególne interfejsy API.