Deze pagina is vertaald door de Cloud Translation API.

Beheer tabbladen

Bouw je eerste tabbladbeheerder.

Overzicht

Deze handleiding laat zien hoe je een tabbladbeheerder bouwt om je Chrome-extensies en documentatietabbladen voor de Chrome Web Store te organiseren.

In deze handleiding leggen we uit hoe je het volgende kunt doen:

Maak een extensiepop-up met behulp van de Action API.
Gebruik de Tabs API om specifieke tabbladen op te vragen.
Bescherm de privacy van gebruikers door de toegangsrechten van de host te beperken.
Wijzig de focus van het tabblad.
Verplaats de tabbladen naar hetzelfde venster en groepeer ze.
Hernoem tabgroepen met behulp van de TabGroups API.

Voordat je begint

Deze handleiding gaat ervan uit dat je basiskennis hebt van webontwikkeling. We raden je aan om Hello World te bekijken voor een introductie tot de workflow voor het ontwikkelen van extensies.

Bouw de extensie

Maak om te beginnen een nieuwe map aan met de naam tabs-manager om de bestanden van de extensie in op te slaan. Als je wilt, kun je de volledige broncode downloaden van GitHub .

Stap 1: Voeg de extensiegegevens en pictogrammen toe.

Maak een bestand met de naam manifest.json aan en voeg de volgende code toe:

{
  "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"
  }
}

Voor meer informatie over deze manifest-sleutels kunt u de handleiding 'Leestijd' raadplegen, waarin de metadata en pictogrammen van de extensie gedetailleerder worden uitgelegd.

Maak een map met images aan en download de pictogrammen daarin.

Stap 2: Maak en style de pop-up

De Action API bestuurt de extensieactie (het pictogram in de werkbalk). Wanneer de gebruiker op de extensieactie klikt, wordt er code uitgevoerd of een pop-upvenster geopend, zoals in dit geval. Begin met het declareren van het pop-upvenster in het manifest.json :

{
  "action": {
    "default_popup": "popup.html"
  }
}

Een pop-up is vergelijkbaar met een webpagina, met één uitzondering: er kan geen inline JavaScript in worden uitgevoerd. Maak een bestand popup.html aan en voeg de volgende code toe:

<!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>

Tip : Je kunt await op het hoogste niveau gebruiken door type="module" toe te voegen aan de scripttag.

Vervolgens ga je de pop-up stylen. Maak een bestand popup.css aan en voeg de volgende code toe:

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;
}

Stap 3: Beheer de tabbladen

De Tabs API stelt een extensie in staat om tabbladen in de browser aan te maken, op te vragen, te wijzigen en te herschikken.

Verzoek om toestemming

Veel methoden in de Tabs API kunnen worden gebruikt zonder toestemming aan te vragen. We hebben echter toegang nodig tot de title en de URL van de tabbladen; voor deze gevoelige gegevens is toestemming vereist. We zouden toestemming kunnen vragen voor "tabs" , maar dit zou toegang geven tot de gevoelige gegevens van alle tabbladen. Omdat we alleen tabbladen van een specifieke site beheren, vragen we beperkte hostrechten aan.

Beperkte hostmachtigingen stellen ons in staat de privacy van gebruikers te beschermen door specifieke sites verhoogde machtigingen te verlenen. Dit geeft toegang tot de title en URL eigenschappen, evenals extra mogelijkheden. Voeg de gemarkeerde code toe aan het manifest.json -bestand:

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

💡 Wat zijn de belangrijkste verschillen tussen tabbladmachtigingen en hostmachtigingen?

Zowel de "tabs" -machtiging als de hostmachtigingen hebben nadelen.

De "tabs" -toestemming geeft een extensie de mogelijkheid om gevoelige gegevens op alle tabbladen te lezen. Na verloop van tijd kan deze informatie worden gebruikt om de browsegeschiedenis van een gebruiker te verzamelen. Als u deze toestemming aanvraagt, zal Chrome daarom de volgende waarschuwing weergeven tijdens de installatie:

Tabbladwaarschuwingsdialoogvenster voor machtigingen

Hostrechten stellen een extensie in staat om gevoelige eigenschappen van een overeenkomend tabblad te lezen en op te vragen, en scripts op deze tabbladen te injecteren. Gebruikers zullen tijdens de installatie het volgende waarschuwingsbericht zien:

Waarschuwingsdialoogvenster voor hostmachtigingen

Deze waarschuwingen kunnen verontrustend zijn voor gebruikers. Voor een betere onboarding-ervaring raden we aan om optionele machtigingen te implementeren.

De tabbladen opvragen

Je kunt de tabbladen van specifieke URL's ophalen met de methode tabs.query() . Maak een bestand popup.js aan en voeg de volgende code toe:

const tabs = await chrome.tabs.query({
  url: [
    "https://developer.chrome.com/docs/webstore/*",
    "https://developer.chrome.com/docs/extensions/*",
  ]
});

💡 Kan ik Chrome API's rechtstreeks in de pop-up gebruiken?

Een pop-up en andere extensiepagina's kunnen elke Chrome API aanroepen omdat ze worden aangeboden vanuit het Chrome-schema. Bijvoorbeeld: chrome-extension://EXTENSION_ID/popup.html .

Focus op een tabblad

Ten eerste sorteert de extensie de tabnamen (de titels van de HTML-pagina's) alfabetisch. Vervolgens, wanneer op een item in de lijst wordt geklikt, focust de extensie op dat tabblad met behulp van tabs.update() en brengt het venster naar de voorgrond met windows.update() . Voeg de volgende code toe aan het bestand popup.js :

...
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);
...

💡 Interessante JavaScript-code

De Collator wordt gebruikt om de tabtabel te sorteren op basis van de door de gebruiker gewenste taal.
De template-tag wordt gebruikt om een HTML-element te definiëren dat gekloond kan worden, in plaats van document.createElement() te gebruiken om elk item afzonderlijk te creëren.
De URL-constructor die wordt gebruikt om URL's te maken en te parseren.
De Spread-syntaxis wordt gebruikt om de Set van elementen om te zetten in argumenten in de append() aanroep.

Groepeer de tabbladen

De TabGroups API stelt de extensie in staat om de groep een naam te geven en een achtergrondkleur te kiezen. Voeg de "tabGroups" -machtiging toe aan het manifest door de gemarkeerde code toe te voegen:

{
  "permissions": [
    "tabGroups"
  ]
}

Voeg in popup.js de volgende code toe om een knop te maken waarmee alle tabbladen met behulp van tabs.group() worden gegroepeerd en naar het huidige venster worden verplaatst.

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" });
  }
});

Test of het werkt

Controleer of de bestandsstructuur van uw project overeenkomt met de volgende mappenstructuur:

De inhoud van de map van de tabmanager: manifest.json, popup.js, popup.css, popup.html en de map images.

Laad uw extensie lokaal.

Om een uitgepakte extensie in de ontwikkelaarsmodus te laden, volg je de stappen in Hello World .

Open een paar documentatiepagina's.

Open de volgende documenten in verschillende vensters:

Klik op het pop-upvenster. Het zou er zo uit moeten zien:

Klik op de knop "Tabbladen groeperen". Het zou er zo uit moeten zien:

🎯 Mogelijke verbeteringen

Probeer op basis van wat je vandaag hebt geleerd een of meer van de volgende dingen in de praktijk te brengen:

Pas het stijlblad van de pop-up aan.
Wijzig de kleur en titel van de tabgroep.
Beheer de tabbladen van een andere documentatiesite.
Voeg ondersteuning toe voor het opheffen van de groepering van tabbladen.

Blijf bouwen!

Gefeliciteerd met het afronden van deze tutorial 🎉. Blijf je vaardigheden ontwikkelen door de andere tutorials in deze serie te volgen:

Verlenging	Wat je zult leren
Leestijd	Om automatisch een element op elke pagina in te voegen.
Focusmodus	Om code op de huidige pagina uit te voeren na het klikken op de extensieactie.

Ga verder met verkennen

We hopen dat je het leuk vond om deze Chrome-extensie te bouwen en dat je enthousiast bent om je leertraject in Chrome-ontwikkeling voort te zetten. We raden het volgende leertraject aan:

De ontwikkelaarsgids bevat tientallen extra links naar documentatie die relevant is voor het ontwikkelen van geavanceerde extensies.
Extensies hebben toegang tot krachtige API's die verder gaan dan wat beschikbaar is op het open web. De Chrome API-documentatie beschrijft elke API in detail.

Beheer tabbladen Stay organized with collections Save and categorize content based on your preferences.

Overzicht

Voordat je begint

Bouw de extensie

Stap 1: Voeg de extensiegegevens en pictogrammen toe.

Stap 2: Maak en style de pop-up

Stap 3: Beheer de tabbladen

Verzoek om toestemming

De tabbladen opvragen

Focus op een tabblad

Groepeer de tabbladen

Test of het werkt

Laad uw extensie lokaal.

Open een paar documentatiepagina's.

🎯 Mogelijke verbeteringen

Blijf bouwen!

Ga verder met verkennen

Beheer tabbladen