path: root/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html

---
title: Arbeiten mit Taps API
slug: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API
tags:
  - tabs
translation_of: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API
original_slug: Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API
---
<p>{{AddonSidebar}}</p>

<p>Tabs lassen einen Benutzer mehrere Webseiten in seinem Browserfenster öffnen und wechseln dann zwischen diesen Webseiten. Mit der Tabs API können Sie mit diesen Tabs arbeiten und diese manipulieren, um Programme zu erstellen, die Nutzern neue Möglichkeiten bieten, mit Tabs zu arbeiten oder die Funktionen Ihrer Erweiterung zu liefern.</p>

<p>In diesem "how-to"-Artikel schauen wir uns an:</p>

<ul>
 <li>Berechtigungen, die für die Verwendung der Tabs API benötigt werden.</li>
 <li>Mehr über Tabs und ihre Eigenschaften erfahren Sie mit {{WebExtAPIRef("tabs.query")}}.</li>
 <li>Tabs erstellen, duplizieren, verschieben, aktualisieren, neu laden und entfernen.</li>
 <li>Manipulationen des Zoomniveaus eines Tab.</li>
 <li>Manipulationen eines Tabs CSS.</li>
</ul>

<p>Wir schließen dann mit Blick auf einige andere, andere Funktionen, die von der API angeboten werden.</p>

<div class="blockIndicator note">
<p><strong>Hinweis:</strong> Es gibt einige Tab-API-Funktionen, die an anderer Stelle abgedeckt sind. Dies sind die Methoden, die Sie verwenden können, um den Inhalt der Registerkarten mit Skripten zu manipulieren  ({{WebExtAPIRef("tabs.connect")}},  {{WebExtAPIRef("tabs.sendMessage")}} und  {{WebExtAPIRef("tabs.executeScript")}}). Wenn Sie mehr Informationen über diese Methoden wünschen, lesen Sie die <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">Artikelinhaltskripte</a> Concepts und die Anleitung ändern Sie<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">eine Webseite</a>.</p>
</div>

<p><strong>Berechtigungen und die Tabs API</strong></p>

<p>Für die meisten Tabs API-Funktionen benötigen Sie keine Berechtigungen; Es gibt jedoch einige Ausnahmen:</p>

<ul>
 <li>Für den Zugriff auf die Eigenschaften <code>Tab.url</code>, <code>Tab.title </code>und <code>Tab.favIconUrl</code> des Tab-Objekts ist die Erlaubnis "Tabs" erforderlich. In Firefox benötigen Sie auch "Tabs", um eine <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">Abfrage</a> per URL durchzuführen.</li>
 <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">Die Host-Berechtigung</a> ist für die {{WebExtAPIRef("tabs.executeScript")}} oder  {{WebExtAPIRef("tabs.insertCSS")}}. erforderlich.</li>
</ul>

<p>Im Folgenden können Sie in der manifest.json-Datei Ihrer Erweiterung die Erlaubnis "Tabs " beantragen :</p>

<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="property token">"permissions"</span><span class="operator token">:</span> <span class="punctuation token">[</span>
  <span class="string token">"&lt;all_urls&gt;"</span><span class="punctuation token">,</span>
  <span class="string token">"tabs"</span>
<span class="punctuation token">]</span><span class="punctuation token">,</span></code></pre>

<p>Diese Anfrage gibt Ihnen die Nutzung aller Tabs API-Funktion auf allen Websites, die Ihr Nutzer besucht. Es gibt auch einen alternativen Ansatz für die Anforderung von Berechtigungen zur Verwendung von {{WebExtAPIRef("tabs.executeScript")}} or {{WebExtAPIRef("tabs.insertCSS")}}, bei dem Sie keine Host-Erlaubnis benötigen, in Form von <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">"activeTab"</a>. Diese Erlaubnis bietet die gleichen Rechte wie "Tabs" mit&lt; all _ urls &gt;,aber mit zwei Einschränkungen:</p>

<ul>
 <li>Der Benutzer muss mit der Erweiterung über seine Browser-oder Seiten-Aktion, Kontextmenü oder Tastenkombination interagieren.</li>
 <li>Es erteilt nur die Erlaubnis innerhalb der aktiven Registerkarte.</li>
</ul>

<p>Der Vorteil dieses Ansatzes ist, dass der Benutzer keine Berechtigung erhält, die besagt, dass Ihre Erweiterung "Zugriff auf Ihre Daten für alle Websites" kann. Das liegt daran , dass &lt; all _ urls &gt; Erlaubnis einer Erweiterung die Möglichkeit gibt, Skripte in jedem Tab auszuführen, zu jeder Zeit, die sie mag, während <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">"activeTab"</a> darauf beschränkt ist, der Erweiterung zu erlauben, eine vom Benutzer angeforderte Aktion in der Aktuelle Registerkarte.</p>

<p><strong>Mehr über Tabs und ihre Eigenschaften entdecken</strong></p>

<p>Es wird Gelegenheiten geben, in denen Sie eine Liste aller Tabs in allen Browser-Fenstern erhalten wollen. Zu anderen Zeiten möchten Sie vielleicht eine Untergruppe von Tabs finden, die bestimmten Kriterien entsprechen, wie zum Beispiel solchen, die von einem bestimmten Tab geöffnet werden oder Seiten aus einer bestimmten Domain anzeigen. Und wenn Sie Ihre Liste der Tabs haben, werden Sie wahrscheinlich mehr über ihre Eigenschaften wissen wollen.</p>

<p>Hier kommt die {{WebExtAPIRef("tabs.query")}} in den Fall. Wird allein verwendet, um alle Tabs zu erhalten oder das queryInfo-Objekt zu nehmen —, um Abfragekriterien anzugeben, wie zum Beispiel, ob die Registerkarte im aktuellen Fenster aktiv ist, oder eines oder mehrere von 17 Kriterien —  {{WebExtAPIRef("tabs.query")}} gibt ein Array von  {{WebExtAPIRef("tabs.Tab")}} Objekte, die Informationen über die Registerkarten enthalten.</p>

<p>Wenn Sie nur Informationen über den aktuellen Reiter wünschen, können Sie eine {{WebExtAPIRef("tabs.Tab")}} erhalten. Objekt für diese Registerkarte mit {{WebExtAPIRef("tabs.getCurrent")}}. Wenn Sie eine Tab-ID haben, können Sie die  {{WebExtAPIRef("tabs.Tab")}} Objekt mit {{WebExtAPIRef("tabs.get")}}.</p>

<div class="blockIndicator note">
<p><strong>notiz:</strong></p>

<ul>
 <li><strong>In Chrome</strong> kann der Benutzer mehrere Tabs in einem Fenster auswählen, und die Tabs API sieht diese als hervorgehobene Tabs.</li>
 <li><strong>In Firefox</strong> kann der Benutzer mehrere Tabs nicht auswählen, daher sind "hervorgehoben" und "aktiv" synonym.</li>
</ul>
</div>

<h3 id="Wie_man_mit_dem_Beispiel_geht">Wie man mit dem Beispiel geht</h3>

<p>Um zu sehen, wie  {{WebExtAPIRef("tabs.query")}} und  {{WebExtAPIRef("tabs.Tab")}} werden verwendet, lassen Sie uns durch, wie  das <a href="https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs">Tabs-Tabs-Tabs </a>Beispiel fügt die Liste von" Schalter auf Tabs "zu seiner Toolbar-Taste Popup.</p>

<p><a href="https://mdn.mozillademos.org/files/15723/Switch_to_tab.png"><img alt="" src="https://mdn.mozillademos.org/files/15723/Switch_to_tab.png" style="height: 645px; width: 369px;"></a></p>

<h3 id="manifest.json"><strong>manifest.json</strong></h3>

<p>Hier ist das <a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/manifest.json">manifest.json</a>:</p>

<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="punctuation token">{</span>
  <span class="property token">"browser_action"</span><span class="operator token">:</span> <span class="punctuation token">{</span>
    <span class="property token">"browser_style"</span><span class="operator token">:</span> <span class="boolean token">true</span><span class="punctuation token">,</span>
    <span class="property token">"default_title"</span><span class="operator token">:</span> <span class="string token">"Tabs, tabs, tabs"</span><span class="punctuation token">,</span>
    <span class="property token">"default_popup"</span><span class="operator token">:</span> <span class="string token">"tabs.html"</span>
  <span class="punctuation token">}</span><span class="punctuation token">,</span>
  <span class="property token">"description"</span><span class="operator token">:</span> <span class="string token">"A list of methods you can perform on a tab."</span><span class="punctuation token">,</span>
  <span class="property token">"homepage_url"</span><span class="operator token">:</span> <span class="string token">"https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs"</span><span class="punctuation token">,</span>
  <span class="property token">"manifest_version"</span><span class="operator token">:</span> <span class="number token">2</span><span class="punctuation token">,</span>
  <span class="property token">"name"</span><span class="operator token">:</span> <span class="string token">"Tabs, tabs, tabs"</span><span class="punctuation token">,</span>
  <span class="property token">"permissions"</span><span class="operator token">:</span> <span class="punctuation token">[</span>
    <span class="string token">"tabs"</span>
  <span class="punctuation token">]</span><span class="punctuation token">,</span>
  <span class="property token">"version"</span><span class="operator token">:</span> <span class="string token">"1.0"</span>
<span class="punctuation token">}</span></code></pre>

<div class="blockIndicator note">
<p>Hinweis:</p>

<ul>
 <li><strong>Tabs.html wird als Standard </strong><strong>_ Popup in</strong> browser<strong> _ </strong><strong>action</strong><strong>definiert.</strong>Es wird angezeigt, wenn der Benutzer auf das Symbollei-Symbol der Erweiterung klickt.</li>
 <li><strong>Die Berechtigungen beinhalten Registerkarten. </strong>Dies ist notwendig, um die Tabelliste zu unterstützen, da die Erweiterung den Titel der Registerkarten für die Anzeige im Popup liest.</li>
</ul>
</div>

<h3 id="Tabs.html">Tabs.html</h3>

<p>Tabs.html definiert den Inhalt des Popups der Erweiterung:</p>

<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>

 <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>link</span> <span class="attr-name token">rel</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>stylesheet<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs.css<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
 <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>

 <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>panel<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>panel-section panel-section-header<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text-section-header<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Tabs-tabs-tabs<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>

    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-move-beginning<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Move active tab to the beginning of the window<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>


…

Define the other menu items
…

    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>switch-tabs<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>

     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Switch to tab<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>

     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-list<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>

    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
 <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>

 <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>

<p>Hier ist eine Zusammenfassung der oben genannten tut:</p>

<ol>
 <li>Die Menüpunkte werden deklariert.</li>
 <li>Ein leerer <code>Div </code>mit der ID-<code>Tabs-Liste</code> wird deklariert, um die Liste der Tabs zu enthalten.</li>
 <li>Tabs.js heißt.</li>
</ol>

<h3 id="Tabs.js">Tabs.js</h3>

<p>In <a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.js">tabs.js</a>werdenwir sehen, wie die Liste der Tabs aufgebaut und zum Popup hinzugefügt wird.  </p>

<p><strong>Das Popup schaffen</strong></p>

<p>Zunächst wird ein Event-Handler hinzugefügt, um ListTabs () auszuführen , wenn tabs.html geladen wird:</p>

<pre>document.addEventListener ("DOMContentLoaded", hört Tabs);</pre>

<p>Das erste, was <code>listTabs ()</code> tut, ist <code>getCurrentWindowTabs ()</code>zu nennen. Hier wird ein {{WebExtAPIRef("tabs.query")}} verwendet, um eine  {{WebExtAPIRef("tabs.Tab")}} zu erhalten. Objekt für die Tabs im aktuellen Fenster:</p>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">return</span> browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="boolean token">true</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>

<p>Jetzt ist <code>listTabs()</code> bereit , den Inhalt für das Popup zu erstellen.</p>

<p>Zunächst:</p>

<ol>
 <li>Schnappen Sie sich die <code>tabs-list div</code>.</li>
 <li>Erstellen Sie ein Dokumentenfragment (in das die Liste eingebaut wird).</li>
 <li>Setzen Sie Zähler.</li>
 <li>Klären Sie den Inhalt der <code>Tabs-Liste div</code>.</li>
</ol>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">listTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="function token"> getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
    <span class="keyword token">let</span> tabsList <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'tabs-list'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="keyword token">let</span> currentTabs <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createDocumentFragment</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="keyword token">let</span> limit <span class="operator token">=</span> <span class="number token">5</span><span class="punctuation token">;</span>
    <span class="keyword token">let</span> counter <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>

    tabsList<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span></code></pre>

<p>Als nächstes werden wir die Links für jeden Tab erstellen:</p>

<ol>
 <li>Schleifen Sie sich durch die ersten 5 Elemente aus der   {{WebExtAPIRef("tabs.Tab")}} Objekt.</li>
 <li>Fügen Sie für jeden Artikel einen Hyperlink zum Dokumentenfragment hinzu.
  <ul>
   <li>Das Etikett des Links — das heißt, sein Text — wird mit dem Titel des Tab gesetzt (oder mit der ID, wenn er keinen Titel hat).</li>
   <li>Die Adresse des Links wird mit der Personalausweis des Tabs gesetzt.</li>
  </ul>
 </li>
</ol>

<pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> tab <span class="keyword token">of</span> tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span>
     <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>tab<span class="punctuation token">.</span>active <span class="operator token">&amp;&amp;</span> counter <span class="operator token">&lt;=</span> limit<span class="punctuation token">)</span> <span class="punctuation token">{</span>
        <span class="keyword token">let</span> tabLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'a'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

        tabLink<span class="punctuation token">.</span>textContent <span class="operator token">=</span> tab<span class="punctuation token">.</span>title <span class="operator token">||</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">;</span>

       tabLink<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">'href'</span><span class="punctuation token">,</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span>
        tabLink<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">'switch-tabs'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
        currentTabs<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tabLink<span class="punctuation token">)</span><span class="punctuation token">;</span>
     <span class="punctuation token">}</span>

     counter <span class="operator token">+=</span> <span class="number token">1</span><span class="punctuation token">;</span>

    <span class="punctuation token">}</span></code></pre>

<p>Schließlich wird das Dokumentenfragment auf die Tabs-Liste div geschrieben:</p>

<pre class="brush: js line-numbers language-js"><code class="language-js">  tabsList<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>currentTabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>

<p><strong>Arbeiten mit dem aktiven Reiter</strong></p>

<p>Ein weiteres verwandtes Beispielmerkmal ist die Info-Option "Alert active tab", die alle Registerkarten [{WebExtAPIRef ("-Register) ablegt. Tab ")} Objekteigenschaften für die aktive Registerkarte in einen Alarm:</p>

<pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>id <span class="operator token">===</span> <span class="string token">"tabs-alertinfo"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="function token">   callOnActiveTab</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tab</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
     <span class="keyword token">let</span> props <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
     <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">let</span> item <span class="keyword token">in</span> tab</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
       props <span class="operator token">+=</span> <span class="template-string token"><span class="string token">`</span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span> item <span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> = </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span> tab<span class="punctuation token">[</span>item<span class="punctuation token">]</span> <span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> \n`</span></span><span class="punctuation token">;</span>
     <span class="punctuation token">}</span>
<span class="function token">     alert</span><span class="punctuation token">(</span>props<span class="punctuation token">)</span><span class="punctuation token">;</span>
   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
 <span class="punctuation token">}</span></code></pre>

<p>Wobei <code>callOnActiveTab() </code>das aktive Tab-Objekt findet, indem man sich durch die Registerkarten {{WebExtAPIRef("tabs.Tab")}} schlodert. Tab ")} Objekte, die nach dem Gegenstand mit aktivem Satz suchen:</p>

<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
 <span class="keyword token">function</span> <span class="function token">callOnActiveTab</span><span class="punctuation token">(</span><span class="parameter token">callback</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="function token">   getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
     <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">var</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
       <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token">tab<span class="punctuation token">.</span>active</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="function token">         callback</span><span class="punctuation token">(</span>tab<span class="punctuation token">,</span> tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
       <span class="punctuation token">}</span>
     <span class="punctuation token">}</span>
   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
 <span class="punctuation token">}</span>
<span class="punctuation token">}</span></code></pre>

<p><strong>Tabs erstellen, duplizieren, verschieben, aktualisieren, neu laden und entfernen</strong></p>

<p>Nachdem Sie Informationen über die Registerkarten gesammelt haben, werden Sie höchstwahrscheinlich etwas mit ihnen machen wollen — entweder den Benutzern Funktionen für die Manipulation und Verwaltung von Registern bieten oder Funktionen in Ihrer Erweiterung implementieren.</p>

<p>Folgende Funktionen stehen zur Verfügung:</p>

<ul>
 <li>Erstellen Sie eine neue Registerkarte ({{WebExtAPIRef("tabs.create")}}).</li>
 <li>Duplizieren sie eine neue Registerkarte ({{WebExtAPIRef("tabs.duplicate")}}).</li>
 <li>Entfernen Sie eine Registerkarte ({{WebExtAPIRef("tabs.remove")}}).</li>
 <li>Verschieben Sie eine Registerkarte ({{WebExtAPIRef("tabs.move")}}).</li>
 <li>Aktualisieren Sie die URL der Registerkarte, um — effektiv auf eine neue Seite — ({{WebExtAPIRef("tabs.update")}}).</li>
 <li>Die Seite der Registerkarte neu Laden ({{WebExtAPIRef("tabs.reload")}}).</li>
</ul>

<div class="blockIndicator note">
<p><strong>notiz:</strong></p>

<p>Diese Funktionen erfordern alle die ID (oder IDs) der Registerkarte, die sie manipulieren:</p>

<ul>
 <li>{{WebExtAPIRef ("tabs.duplicate")}}</li>
 <li>{{WebExtAPIRef("tabs.remove")}})</li>
 <li>{{WebExtAPIRef ("tabs.move")}}</li>
</ul>

<p>Während die folgenden Funktionen auf dem aktiven Tab (sofern keine Tab-ID zur Verfügung gestellt wird) wirken:</p>

<ul>
 <li>{{WebExtAPIRef("tabs.update")}}</li>
 <li>{{WebExtAPIRef("tabs.reload")}}</li>
</ul>
</div>

<p><strong>Wie man mit dem Beispiel geht</strong></p>

<p>Das Beispiel <a href="https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs">Tabs-Tabs</a> übt all diese Funktionen aus, bis hin zur Aktualisierung der URL eines Tabs. Die Art und Weise, in der diese APIs verwendet werden, ist ähnlich, so dass wir uns eine der am meisten involvierten Implementierungen ansehen werden, die des "Move active tab to the beginning of the the. Option "Option der Fensterliste.</p>

<p>Aber zunächst ist hier eine Demonstration des Features in Aktion:</p>

<p>{{EmbedYouTube("-lJRzTIvhxo")}}</p>

<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/manifest.json"><strong>manifest.json</strong></a></p>

<p>Keine der Funktionen benötigt eine Betriebsgenehmigung, so dass es keine Funktionen in der manifest.json-Datei gibt, die hervorgehoben werden müssen.</p>

<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.html"><strong>Tabs.html</strong></a></p>

<p>Tabs.html definiert das "Menü", das im Popup angezeigt wird, das die Option "Aktive Registerkarte zum Anfang der Fensterliste verschieben" enthält, mit einer Reihe von<code> &lt;a&gt; </code>Tags, die von einem visuellen Separator gruppiert sind. Jeder Menüpunkt erhält eine ID, die in tabs.js verwendet wird, um festzustellen, welcher Menüpunkt angefordert wird.</p>

<pre class="brush: html line-numbers language-html"><code class="language-html">  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-move-beginning<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Move active tab to the beginning of the window<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-move-end<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Move active tab to the end of the window<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>

    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>panel-section-separator<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>


    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-duplicate<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Duplicate active tab<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>

    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-reload<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Reload active tab<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-alertinfo<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Alert active tab info<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span></code></pre>

<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.js"><strong>Tabs.js</strong></a></p>

<p>Um das in tabs.html definierte "Menü" zu implementieren, enthält tabs.js einen Hörer für Klicks in tabs.html:</p>

<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
 <span class="keyword token">function</span> <span class="function token">callOnActiveTab</span><span class="punctuation token">(</span><span class="parameter token">callback</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>

<span class="function token">   getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
     <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">var</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
       <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token">tab<span class="punctuation token">.</span>active</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="function token">         callback</span><span class="punctuation token">(</span>tab<span class="punctuation token">,</span> tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
       <span class="punctuation token">}</span>
     <span class="punctuation token">}</span>
   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="punctuation token">}</span></code></pre>

<p>Eine Reihe von <code>if</code>Anweisungen dann schauen, um die ID des Artikels geklickt.</p>

<p>Dieser Code-Snippet ist für die Option "Aktive Registerkarte zum Anfang der Fensterliste verschieben":</p>

<pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>id <span class="operator token">===</span> <span class="string token">"tabs-move-beginning"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="function token">   callOnActiveTab</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tab<span class="punctuation token">,</span> tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
     <span class="keyword token">var</span> index <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
     <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token"><span class="operator token">!</span>tab<span class="punctuation token">.</span>pinned</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
       index <span class="operator token">=</span> <span class="function token">firstUnpinnedTab</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
     <span class="punctuation token">}</span>
     console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="template-string token"><span class="string token">`moving </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>tab<span class="punctuation token">.</span>id<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> to </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>index<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">)</span>
     browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">move</span><span class="punctuation token">(</span><span class="punctuation token">[</span>tab<span class="punctuation token">.</span>id<span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>index<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
 <span class="punctuation token">}</span></code></pre>

<p>Es ist erwähnenswert, die Verwendung von <code>console.log ()</code>. Auf diese Weise können Sie Informationen an die <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Debugging">Debugger-Konsole</a> ausgeben , was bei der Lösung von Problemen, die während der Entwicklung gefunden wurden, nützlich sein kann.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15722/console.png"></p>

<p>Der Bewegungscode ruft zunächst <code>callOnActiveTab ()</code> an , der wiederum <code>getCurrentWindowTabs ()</code> anruft, um eine {{WebExtAPIRef("tabs.Tab")}} Objekt, das die Registerkarten des aktiven Fensters enthält. Es schleift sich dann durch das Objekt, um das aktive Tab-Objekt zu finden und zurückzugeben:</p>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">callOnActiveTab</span><span class="punctuation token">(</span><span class="parameter token">callback</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="function token">   getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
     <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">var</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
       <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token">tab<span class="punctuation token">.</span>active</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="function token">         callback</span><span class="punctuation token">(</span>tab<span class="punctuation token">,</span> tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
       <span class="punctuation token">}</span>
     <span class="punctuation token">}</span>
   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
 <span class="punctuation token">}</span></code></pre>

<p><strong>Gepinnte Tabs</strong></p>

<p>Eine Besonderheit von Registern ist, dass  der Benutzer Tabs in ein Fenster einfügen kann. Gepinnte Tabs werden am Anfang der Tab-Liste platziert und können nicht verschoben werden. Das bedeutet, dass die früheste Position, in die sich ein Tab bewegen kann, die erste Position nach einem gefiederten Tabs ist. Also , <code>firstUnpinnedTab ()</code> wird aufgerufen, um die Position des ersten ungepasten Tab zu finden, indem man durch das <code>Tabs</code>-Objekt Looping:</p>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">firstUnpinnedTab</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
 <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">var</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
   <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token"><span class="operator token">!</span>tab<span class="punctuation token">.</span>pinned</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
     <span class="keyword token">return</span> tab<span class="punctuation token">.</span>index<span class="punctuation token">;</span>
   <span class="punctuation token">}</span>
 <span class="punctuation token">}</span>
<span class="punctuation token">}</span></code></pre>

<p>Wir haben jetzt alles, was zum Verschieben des Tab notwendig ist: Das aktive Tab-Objekt, von dem wir die Reiter-ID erhalten können und die Position, in die der Reiter verschoben werden soll. So können wir den Schritt umsetzen:</p>

<pre>browser.tabs.move ([tab.id], {index});</pre>

<p>Die restlichen Funktionen zum Duplizieren, Laden, Erstellen und Entfernen von Tabs werden ähnlich implementiert.</p>

<h4 id="Manipulationen_eines_Tab"><strong>Manipulationen eines Tab</strong></h4>

<p>Die nächste Reihe von Funktionen ermöglicht es Ihnen, die Zoomstufe in einem Tab zu erhalten  ({{WebExtAPIRef("tabs.getZoom")}}) und zu setzen ({{WebExtAPIRef("tabs.setZoom")}}) . Sie können auch die Zoom-Einstellungen abrufen ({{WebExtAPIRef("tabs.getZoomSettings")}}) , aber zum Zeitpunkt des Schreibens war die Möglichkeit, die Einstellungen zu setzen ({{WebExtAPIRef("tabs.setZoomSettings")}}) , war in Firefox nicht verfügbar.</p>

<p>Der Zoomwert kann zwischen 30% und 300% liegen (dargestellt als Dezimalzahl <code>0,3 bis 3</code>).</p>

<p>In Firefox sind die Standard-Zoom-Einstellungen:</p>

<ul>
 <li><strong>Standard-Zoom-Level: </strong>100%.</li>
 <li><strong>Zoommodus:</strong> Automatik (so verwaltet der Browser, wie Zoomstufen gesetzt werden).</li>
 <li><strong>Umfang der Zoomwechsel</strong> : "pro-origin",was bedeutet, dass, wenn Sie eine Website wieder besuchen, es die Zoomstufe, die in Ihrem letzten Besuch eingestellt wird, benötigt.</li>
</ul>

<h3 id="Wie_man_mit_dem_Beispiel_geht_2">Wie man mit dem Beispiel geht</h3>

<p>Das  Beispiel der Tabs-Tabs-Tabs enthält drei Vorführungen der Zoom-Funktion: Zoomen, Zoomen und Zoom zurücksetzen. Hier ist das Feature in Aktion:</p>

<p>{{EmbedYouTube("RFr3oYBCg28")}}</p>

<p>Schauen wir uns an, wie der Zoom-In umgesetzt wird.</p>

<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/manifest.json"><strong>manifest.json</strong></a></p>

<p>Keine der Zoom-Funktionen benötigt Berechtigungen, so dass es keine Funktionen in der manifest.json-Datei gibt, die hervorgehoben werden müssen.</p>

<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.html"><strong>Tabs.html</strong></a></p>

<p>Wir haben bereits darüber diskutiert, wie der tabs.html die Optionen für diese Erweiterung definiert, nichts Neues oder Einzigartiges wird getan, um die Zoom-Optionen zur Verfügung zu stellen.</p>

<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.js"><strong>Tabs.js</strong></a></p>

<p>Tabs.js beginnt mit der Definition mehrerer Konstanten, die im Zoom-Code verwendet werden:</p>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> <span class="constant token">ZOOM_INCREMENT</span> <span class="operator token">=</span> <span class="number token">0.2</span><span class="punctuation token">;</span>
<span class="keyword token">const</span> <span class="constant token">MAX_ZOOM</span> <span class="operator token">=</span> <span class="number token">3</span><span class="punctuation token">;</span>
<span class="keyword token">const</span> <span class="constant token">MIN_ZOOM</span> <span class="operator token">=</span> <span class="number token">0.3</span><span class="punctuation token">;</span>
<span class="keyword token">const</span> <span class="constant token">DEFAULT_ZOOM</span> <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span></code></pre>

<p>Es verwendet dann den gleichen Hörer, den wir zuvor besprochen haben, so dass es auf Klicks in tabs.html wirken kann.</p>

<p>Für den Zoom in der Funktion läuft das:</p>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>id <span class="operator token">===</span> <span class="string token">"tabs-add-zoom"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="function token">   callOnActiveTab</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tab</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
     <span class="keyword token">var</span> gettingZoom <span class="operator token">=</span> browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">getZoom</span><span class="punctuation token">(</span>tab<span class="punctuation token">.</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span>
     gettingZoom<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">zoomFactor</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
       <span class="comment token">//the maximum zoomFactor is 3, it can't go higher</span>
       <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token">zoomFactor <span class="operator token">&gt;=</span> <span class="constant token">MAX_ZOOM</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="function token">         alert</span><span class="punctuation token">(</span><span class="string token">"Tab zoom factor is already at max!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
       <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
         <span class="keyword token">var</span> newZoomFactor <span class="operator token">=</span> zoomFactor <span class="operator token">+</span> <span class="constant token">ZOOM_INCREMENT</span><span class="punctuation token">;</span>
         <span class="comment token">//if the newZoomFactor is set to higher than the max accepted</span>
         <span class="comment token">//it won't change, and will never alert that it's at maximum</span>
         newZoomFactor <span class="operator token">=</span> newZoomFactor <span class="operator token">&gt;</span> <span class="constant token">MAX_ZOOM</span> <span class="operator token">?</span> <span class="constant token">MAX_ZOOM</span> <span class="punctuation token">:</span> newZoomFactor<span class="punctuation token">;</span>
         browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">setZoom</span><span class="punctuation token">(</span>tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> newZoomFactor<span class="punctuation token">)</span><span class="punctuation token">;</span>
       <span class="punctuation token">}</span>
     <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
 <span class="punctuation token">}</span></code></pre>

<p>Dieser Code verwendet <code>callOnActiveTab ()</code> , um die Details des aktiven Tab zu erhalten, dann wird {{WebExtAPIRef("tabs.getZoom")}} den aktuellen Zoom-Faktor der Registerkarte erhalten. Der aktuelle Zoom wird mit dem definierten Maximum (MAX _ ZOOM)und einem Alarm verglichen, der ausgegeben wird, wenn sich der Tab bereits im Maximalzoom befindet. Andernfalls wird der Zoom-Level erhöht, aber auf den maximalen Zoom beschränkt, dann wird der Zoom mit {{WebExtAPIRef("tabs.getZoom")}}. gesetzt .</p>

<h4 id="Manipulationen_eines_Tabs_CSS"><strong>Manipulationen eines Tabs CSS</strong></h4>

<p>Eine weitere wichtige Fähigkeit, die die Tabs API bietet, ist die Möglichkeit, die CSS innerhalb eines Tab zu manipulieren.</p>

<p>Dies kann zum Beispiel nützlich sein, wenn Sie bestimmte Seitenelemente markieren oder das Standardlayout der Seite ändern wollen.</p>

<h3 id="Wie_man_mit_dem_Beispiel_geht_3">Wie man mit dem Beispiel geht</h3>

<p>Das <a href="https://github.com/mdn/webextensions-examples/tree/master/apply-css">Apply-css-Beispiel</a> nutzt diese Funktionen, um der Webseite im aktiven Tab einen roten Rand hinzuzufügen. Hier ist das Feature in Aktion:</p>

<p>{{EmbedYouTube ("bcK-GT2Dyhs")}}</p>

<p>Gehen wir durch, wie es aufgebaut ist.</p>

<p><a href="https://github.com/mdn/webextensions-examples/blob/master/apply-css/manifest.json"><strong>manifest.json</strong></a></p>

<p>Um die CSS-Funktionen nutzen zu können, benötigen Sie entweder:</p>

<ul>
 <li><code>"Tabs "</code> -Erlaubnis und <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">Host-Erlaubnis</a> oder</li>
 <li><code>"activeTab"</code>-Erlaubnis .</li>
</ul>

<p>Letzteres ist das nützlichste, da es einer Erweiterung erlaubt,  {{WebExtAPIRef("tabs.insertCSS")}} und  {{WebExtAPIRef("tabs.removeCSS")}} in der aktiven Registerkarte zu verwenden, wenn sie von der Browser-oder Seitenaktion, dem Kontextmenü oder einem Shortcut der Erweiterung ausgeführt wird.</p>

<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="punctuation token">{</span>
  <span class="property token">"description"</span><span class="operator token">:</span> <span class="string token">"Adds a page action to toggle applying CSS to pages."</span><span class="punctuation token">,</span>

 <span class="property token">"manifest_version"</span><span class="operator token">:</span> <span class="number token">2</span><span class="punctuation token">,</span>
 <span class="property token">"name"</span><span class="operator token">:</span> <span class="string token">"apply-css"</span><span class="punctuation token">,</span>
 <span class="property token">"version"</span><span class="operator token">:</span> <span class="string token">"1.0"</span><span class="punctuation token">,</span>
 <span class="property token">"homepage_url"</span><span class="operator token">:</span> <span class="string token">"https://github.com/mdn/webextensions-examples/tree/master/apply-css"</span><span class="punctuation token">,</span>

 <span class="property token">"background"</span><span class="operator token">:</span> <span class="punctuation token">{</span>

    <span class="property token">"scripts"</span><span class="operator token">:</span> <span class="punctuation token">[</span><span class="string token">"background.js"</span><span class="punctuation token">]</span>
 <span class="punctuation token">}</span><span class="punctuation token">,</span>

 <span class="property token">"page_action"</span><span class="operator token">:</span> <span class="punctuation token">{</span>

    <span class="property token">"default_icon"</span><span class="operator token">:</span> <span class="string token">"icons/off.svg"</span><span class="punctuation token">,</span>
    <span class="property token">"browser_style"</span><span class="operator token">:</span> <span class="boolean token">true</span>
 <span class="punctuation token">}</span><span class="punctuation token">,</span>

 <span class="property token">"permissions"</span><span class="operator token">:</span> <span class="punctuation token">[</span>
    <span class="string token">"activeTab"</span><span class="punctuation token">,</span>
    <span class="string token">"tabs"</span>
 <span class="punctuation token">]</span>

<span class="punctuation token">}</span></code></pre>

<p>Sie werden darauf hinweisen, dass zusätzlich zu "<code>activeTab</code>" die Erlaubnis " Tabs"angefordert wird. Diese zusätzliche Erlaubnis ist erforderlich, um das Skript der Erweiterung in die Lage zu versetzen, auf die URL des Registers zuzugreifen, deren Bedeutung wir gleich sehen werden.</p>

<p>Die anderen Hauptmerkmale in der manifest.json-Datei sind die Definition von:</p>

<ul>
 <li><strong>Ein Hintergrundskript</strong>, das gestartet wird, sobald die Erweiterung geladen wird.</li>
 <li><strong>Eine "Seitenaktion</strong>", die ein Symbol definiert, das in die Adressleiste des Browsers aufgenommen werden soll.</li>
</ul>

<p><a href="https://github.com/mdn/webextensions-examples/blob/master/apply-css/background.js"><strong>Background.js</strong></a></p>

<p>Beim Start setzt background.js einige Konstanten, um die zu bewendenden CSS zu definieren, Titel für die "Seitenaktion", und eine Liste von Protokollen, in denen die Erweiterung funktioniert:</p>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> <span class="constant token">CSS</span> <span class="operator token">=</span> <span class="string token">"body { border: 20px solid red; }"</span><span class="punctuation token">;</span>
<span class="keyword token">const</span> <span class="constant token">TITLE_APPLY</span> <span class="operator token">=</span> <span class="string token">"Apply CSS"</span><span class="punctuation token">;</span>
<span class="keyword token">const</span> <span class="constant token">TITLE_REMOVE</span> <span class="operator token">=</span> <span class="string token">"Remove CSS"</span><span class="punctuation token">;</span>
<span class="keyword token">const</span> <span class="constant token">APPLICABLE_PROTOCOLS</span> <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">"http:"</span><span class="punctuation token">,</span> <span class="string token">"https:"</span><span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre>

<p>Wenn die Erweiterung zum ersten Mal geladen wird, verwendet sie {{WebExtAPIRef("tabs.query")}}, um eine Liste aller Tabs im aktuellen Browserfenster zu erhalten. Es schleit sich dann durch die Tabs, die <code>InitializePageAction()</code>rufen.</p>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> gettingAllTabs <span class="operator token">=</span> browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

gettingAllTabs<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
 <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">let</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="function token">   initializePageAction</span><span class="punctuation token">(</span>tab<span class="punctuation token">)</span><span class="punctuation token">;</span>
 <span class="punctuation token">}</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<p><code>InitializePageAction</code> verwendet protokolIsApplicable () , um festzustellen, ob die URL der aktiven Registerkarte eine ist, auf die die CSS angewendet werden kann:</p>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">protocolIsApplicable</span><span class="punctuation token">(</span><span class="parameter token">url</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
 <span class="keyword token">var</span> anchor <span class="operator token">=</span>  document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'a'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
 anchor<span class="punctuation token">.</span>href <span class="operator token">=</span> url<span class="punctuation token">;</span>
 <span class="keyword token">return</span> <span class="constant token">APPLICABLE_PROTOCOLS</span><span class="punctuation token">.</span><span class="function token">includes</span><span class="punctuation token">(</span>anchor<span class="punctuation token">.</span>protocol<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>

<p>Wenn das Beispiel dann auf der Registerkarte wirken kann, setzt <code>initializePageAction ()</code> das <code>PageAction</code>-Symbol und den Titel des Tab, um die "Off"-Versionen zu verwenden, bevor die <code>PageAction</code>-Version sichtbar gemacht wird:</p>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">initializePageAction</span><span class="punctuation token">(</span><span class="parameter token">tab</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>

 <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token"><span class="function token">protocolIsApplicable</span><span class="punctuation token">(</span>tab<span class="punctuation token">.</span>url<span class="punctuation token">)</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
   browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setIcon</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> path<span class="punctuation token">:</span> <span class="string token">"icons/off.svg"</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
   browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setTitle</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> title<span class="punctuation token">:</span> <span class="constant token">TITLE_APPLY</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
   browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">show</span><span class="punctuation token">(</span>tab<span class="punctuation token">.</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span>
 <span class="punctuation token">}</span>
<span class="punctuation token">}</span></code></pre>

<p>Als Nächstes wartet ein Zuhörer auf der <code>pageAction.onClicked</code> darauf, dass das <code>PageAction</code>-Symbol angeklickt wird  , und ruft toggleCSS an , wenn es ist.</p>

<pre>browser.pageAction.onClicked.addListener (toggleCSS);</pre>

<p><code>ToggleCSS ()</code> erhält den Titel der <code>PageAction</code> und nimmt dann die beschriebene Aktion auf:</p>

<ul>
 <li><strong>Für "Apply CSS":</strong>

  <ul>
   <li>Das <code>PageAction</code>-Symbol und den Titel in die "Entfernen"-Versionen.</li>
   <li>Es ist eine sehr gut. {{WebExtAPIRef("tabs.insertCSS")}}.</li>
  </ul>
 </li>
 <li><strong>Für "Remove CSS":</strong>
  <ul>
   <li>Das <code>PageAction</code>-Symbol und den Titel in die "Anwendung"-Versionen.</li>
   <li>Entfernt die CSS mit {{WebExtAPIRef("tabs.removeCSS")}}.</li>
  </ul>
 </li>
</ul>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">toggleCSS</span><span class="punctuation token">(</span><span class="parameter token">tab</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>


 <span class="keyword token">function</span> <span class="function token">gotTitle</span><span class="punctuation token">(</span><span class="parameter token">title</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>

    <span class="keyword token">if</span> <span class="punctuation token">(</span>title <span class="operator token">===</span> <span class="constant token">TITLE_APPLY</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
     browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setIcon</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> path<span class="punctuation token">:</span> <span class="string token">"icons/on.svg"</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
     browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setTitle</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> title<span class="punctuation token">:</span> <span class="constant token">TITLE_REMOVE</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
     browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">insertCSS</span><span class="punctuation token">(</span><span class="punctuation token">{</span>code<span class="punctuation token">:</span> <span class="constant token">CSS</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
     browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setIcon</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> path<span class="punctuation token">:</span> <span class="string token">"icons/off.svg"</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
     browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setTitle</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> title<span class="punctuation token">:</span> <span class="constant token">TITLE_APPLY</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
     browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">removeCSS</span><span class="punctuation token">(</span><span class="punctuation token">{</span>code<span class="punctuation token">:</span> <span class="constant token">CSS</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="punctuation token">}</span>
 <span class="punctuation token">}</span>

 <span class="keyword token">var</span> gettingTitle <span class="operator token">=</span> browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">getTitle</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

 gettingTitle<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>gotTitle<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>

<p>Um sicherzustellen, dass die PageAction nach jedem Update auf den Tab gültig ist, ruft ein Zuhörer auf  {{WebExtAPIRef("tabs.onUpdated")}} jedes Mal, wenn der Tab aktualisiert wird, auf initializePageAction () , um zu überprüfen, ob der Reiter immer noch ein Protokoll, auf das das CSS angewendet werden kann.</p>

<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span>onUpdated<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">id<span class="punctuation token">,</span> changeInfo<span class="punctuation token">,</span> tab</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
<span class="function token"> initializePageAction</span><span class="punctuation token">(</span>tab<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<h4 id="Einige_weitere_interessante_Fähigkeiten"><strong>Einige weitere interessante Fähigkeiten</strong></h4>

<p>Es gibt noch ein paar andere Tabs API-Funktionen, die nicht in einen der früheren Abschnitte passen:</p>

<ul>
 <li>Erfassen Sie den sichtbaren Tab-Inhalt mit {{WebExtAPIRef("tabs.captureVisibleTab")}}.</li>
 <li>Erkennen Sie die Hauptsprache des Inhalts in einem Tab mit {{WebExtAPIRef("tabs.detectLanguage")}} . Dies könnte zum Beispiel verwendet werden, um die Sprache in Ihrem UI mit der Seite, in der sie läuft, zu vergleichen.</li>
</ul>

<p><strong>Weitere Informationen</strong></p>

<p>Wenn Sie mehr über die Tabs API erfahren möchten, schauen Sie sich an:</p>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs">Tabs API-Referenz</a></li>
 <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples">Beispielerweiterungen</a> (von denen viele die Tabs API verwenden)<a name="_GoBack"></a></li>
</ul>

<p> </p>