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.

Pop-up van de Tabs Manager-extensie
Tabs Manager-extensie

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>

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)