Deze pagina is vertaald door de Cloud Translation API.

Beheer tabbladen

Bouw uw eerste tabbladenmanager.

Overzicht

In deze zelfstudie wordt een tabbladenmanager gebouwd waarmee u de tabbladen met de Chrome-extensie en de documentatie in de Chrome Web Store kunt ordenen.

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

Maak een extensiepop-up met behulp van de Action API.
Zoek naar specifieke tabbladen met behulp van de Tabs API.
Behoud de privacy van gebruikers via beperkte hostrechten.
Wijzig de focus van het tabblad.
Verplaats tabbladen naar hetzelfde venster en groepeer ze.
Hernoem tabbladgroepen met behulp van de TabGroups API.

Voordat je start

In deze handleiding wordt ervan uitgegaan dat u over basiservaring op het gebied van webontwikkeling beschikt. We raden u aan Hello World te bezoeken voor een inleiding tot de workflow voor het ontwikkelen van extensies.

Bouw de extensie

Maak om te beginnen een nieuwe map met de naam tabs-manager om de bestanden van de extensie te bewaren. Als u wilt, kunt u de volledige broncode downloaden op GitHub .

Stap 1: Voeg de extensiegegevens en pictogrammen toe

Maak een bestand met de naam manifest.json 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 manifestsleutels kunt u de Leestijd-tutorial raadplegen waarin de metagegevens en pictogrammen van de extensie gedetailleerder worden uitgelegd.

Maak een map images en download de pictogrammen daarin.

Stap 2: Maak de pop-up en stijl deze

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

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

Een pop-up is vergelijkbaar met een webpagina, met één uitzondering: er kan geen inline JavaScript worden uitgevoerd. Maak een popup.html bestand 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 : U kunt await op het hoogste niveau gebruiken door type="module" aan de scripttag toe te voegen.

Vervolgens ga je de pop-up vormgeven. Maak een popup.css bestand 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

Met de Tabs API kan een extensie tabbladen in de browser maken, opvragen, wijzigen en herschikken.

Toestemming vragen

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

Met beperkte hostmachtigingen kunnen we de privacy van gebruikers beschermen door verhoogde machtigingen te verlenen aan specifieke sites . 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 de machtigingen voor tabbladen en hostmachtigingen?

Zowel de toestemming voor "tabs" als de toestemming voor de host hebben nadelen.

De machtiging "tabs" 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 daarom om deze toestemming vraagt, geeft Chrome tijdens de installatie het volgende waarschuwingsbericht weer:

Waarschuwingsvenster voor tabbladen

Met hostmachtigingen kan een extensie de gevoelige eigenschappen van een overeenkomend tabblad lezen en opvragen, en scripts op deze tabbladen injecteren. Gebruikers zien tijdens de installatie het volgende waarschuwingsbericht:

Waarschuwingsvenster voor hosttoestemming

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

Vraag de tabbladen op

U kunt de tabbladen van specifieke URL's ophalen met behulp van de methode tabs.query() . Maak een popup.js bestand 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 tabbladnamen (de titels van de aanwezige HTML-pagina's) alfabetisch. Wanneer vervolgens op een lijstitem wordt geklikt, wordt de focus op dat tabblad gelegd met behulp van tabs.update() en wordt het venster naar de voorgrond gebracht met behulp van windows.update() . Voeg de volgende code toe aan het popup.js -bestand:

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

💡 Interessant JavaScript dat in deze code wordt gebruikt

De Collator werd gebruikt om de tabbladenarray te sorteren op de voorkeurstaal van de gebruiker.
De sjabloontag die wordt gebruikt om een HTML-element te definiëren dat kan worden gekloond in plaats van document.createElement() te gebruiken om elk item te maken.
De URL-constructor die wordt gebruikt om URL's te maken en te parseren.
De Spread-syntaxis die wordt gebruikt om de Set elementen om te zetten in argumenten in de append() aanroep.

Groepeer de tabbladen

Met de TabGroups API kan de extensie de groep een naam geven en een achtergrondkleur kiezen. Voeg de machtiging "tabGroups" 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 die alle tabbladen groepeert met behulp tabs.group() en ze naar het huidige venster 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 directorystructuur:

De inhoud van de map Tabs Manager: manifest.json, popup.js, popup.css, popup.html en de map afbeeldingen.

Laad uw extensie lokaal

Om een uitgepakte extensie in ontwikkelaarsmodus te laden, volgt u de stappen in Hello World .

Open een paar documentatiepagina's

Open de volgende documenten in verschillende vensters:

Klik op de pop-up. 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 van de volgende zaken te implementeren:

Pas het pop-upstijlblad aan.
Wijzig de kleur en titel van de tabbladgroep.
Beheer de tabbladen van een andere documentatiesite.
Ondersteuning toegevoegd voor het degroeperen van de gegroepeerde tabbladen.

Blijf bouwen!

Gefeliciteerd met het voltooien van deze tutorial 🎉. Blijf je vaardigheden ontwikkelen door andere tutorials over deze serie te voltooien:

Verlenging	Wat je gaat leren
Leestijd	Om automatisch een element op elke pagina in te voegen.
Focus modus	Om code uit te voeren op de huidige pagina nadat u op de extensieactie heeft geklikt.

Ga door met verkennen

We hopen dat u deze Chrome-extensie met plezier heeft gemaakt en dat u graag uw leertraject voor Chrome-ontwikkeling wilt voortzetten. Wij raden het volgende leertraject aan:

De ontwikkelaarshandleiding bevat tientallen extra links naar documentatie die relevant is voor het maken van geavanceerde extensies.
Extensies hebben toegang tot krachtige API's die verder gaan dan wat beschikbaar is op het open web. De documentatie over Chrome API's doorloopt elke API.