Nutzern Optionen anbieten

So wie Nutzer mit Erweiterungen den Chrome-Browser anpassen können, lässt sich die Erweiterung auf der Seite „Optionen“ anpassen. Verwenden Sie Optionen, um Features zu aktivieren und Nutzern die Auswahl der Funktionalität für ihre Anforderungen zu ermöglichen.

Seite „Optionen“ aufrufen

Nutzer können die Seite mit den Optionen über einen direkten Link oder durch einen Rechtsklick auf das Erweiterungssymbol in der Symbolleiste und Auswahl von Optionen aufrufen. Außerdem können Nutzer die Seite mit den Optionen aufrufen, indem sie zuerst chrome://extensions öffnen, nach der gewünschten Erweiterung suchen, auf Details klicken und dann den Link „Optionen“ auswählen.

Link zur Seite „Optionen“ auf der Benutzeroberfläche
Link zur Seite „Optionen“.
Seite mit Optionen für das Kontextmenü
Klicken Sie mit der rechten Maustaste auf das Symbol der Erweiterung.

Seite mit Optionen schreiben

Das folgende Beispiel zeigt eine Optionsseite:

options.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Extension Options</title>
  </head>
  <body>
    <select id="color">
      <option value="red">red</option>
      <option value="green">green</option>
      <option value="blue">blue</option>
      <option value="yellow">yellow</option>
    </select>

    <label>
      <input type="checkbox" id="like" />
      I like colors.
    </label>

    <div id="status"></div>
    <button id="save">Save</button>

    <script src="options.js"></script>
  </body>
</html>

Unten sehen Sie ein Beispiel für ein Optionsskript. Speichern Sie die Datei im selben Ordner wie options.html. Dadurch werden die bevorzugten Optionen des Nutzers auf allen Geräten mit der storage.sync API gespeichert.

options.js:

// Saves options to chrome.storage
const saveOptions = () => {
  const color = document.getElementById('color').value;
  const likesColor = document.getElementById('like').checked;

  chrome.storage.sync.set(
    { favoriteColor: color, likesColor: likesColor },
    () => {
      // Update status to let user know options were saved.
      const status = document.getElementById('status');
      status.textContent = 'Options saved.';
      setTimeout(() => {
        status.textContent = '';
      }, 750);
    }
  );
};

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
const restoreOptions = () => {
  chrome.storage.sync.get(
    { favoriteColor: 'red', likesColor: true },
    (items) => {
      document.getElementById('color').value = items.favoriteColor;
      document.getElementById('like').checked = items.likesColor;
    }
  );
};

document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click', saveOptions);

Fügen Sie abschließend die Berechtigung "storage" zur Manifestdatei der Erweiterung hinzu:

manifest.json:

{
  "name": "My extension",
  ...
  "permissions": [
    "storage"
  ]
  ...
}

Funktionsweise der Seite „Optionen für Deklarationen“

Es gibt zwei Arten von Seiten mit Erweiterungsoptionen: ganzseitige und eingebettete Seiten. Der Typ der Optionsseite wird durch seine Deklaration im Manifest bestimmt.

Vollständige Seitenoptionen

In einem neuen Tab wird eine ganzseitige Optionsseite angezeigt. Registrieren Sie die HTML-Datei für Optionen im Manifest im Feld "options_page".

manifest.json:

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}
Vollständige Seitenoptionen
Ganzseitige Optionen in einem neuen Tab.

Eingebettete Optionen

Auf einer Seite mit eingebetteten Optionen können Nutzer Erweiterungsoptionen anpassen, ohne die Seite zur Verwaltung von Erweiterungen in einem eingebetteten Feld verlassen zu müssen. Registriere die HTML-Datei im Feld "options_ui" im Manifest der Erweiterung und setze dabei den Schlüssel "open_in_tab" auf false, um eingebettete Optionen anzugeben.

manifest.json:

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}
Eingebettete Optionen
Eingebettete Optionen.
page (string)
Gibt den Pfad zur Seite „Optionen“ relativ zum Stammverzeichnis der Erweiterung an.
open_in_tab (boolean)
Gibt an, ob die Seite mit den Optionen der Erweiterung in einem neuen Tab geöffnet wird. Ist sie auf false gesetzt, wird die Seite mit den Optionen der Erweiterung in chrome://extensions eingebettet und nicht in einem neuen Tab geöffnet.

Unterschiede berücksichtigen

In chrome://extensions eingebettete Optionsseiten unterscheiden sich geringfügig im Verhalten von Optionsseiten auf Tabs.

Link zur Seite „Optionen“

Eine Erweiterung kann durch Aufrufen von chrome.runtime.openOptionsPage() direkt mit der Seite mit den Optionen verlinkt werden. Sie kann beispielsweise einem Pop-up hinzugefügt werden:

popup.html:

<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>

popup.js:

document.querySelector('#go-to-options').addEventListener('click', function() {
  if (chrome.runtime.openOptionsPage) {
    chrome.runtime.openOptionsPage();
  } else {
    window.open(chrome.runtime.getURL('options.html'));
  }
});

Tabs API

Da der Code für eingebettete Optionen nicht in einem Tab gehostet wird, kann die Tabs API nicht verwendet werden. Verwenden Sie stattdessen runtime.connect() und runtime.sendMessage(), wenn der enthaltene Tab über die Seite „Optionen“ bearbeitet werden muss.

Messaging-APIs

Wenn die Optionsseite einer Erweiterung eine Nachricht mit runtime.connect() oder runtime.sendMessage() sendet, wird der Tab des Absenders nicht konfiguriert. In diesem Fall ist die URL des Absenders die URL der Optionsseite.

Größen

Die Größe der eingebetteten Optionen sollte automatisch anhand des Seiteninhalts festgelegt werden. Das eingebettete Feld findet jedoch möglicherweise für einige Inhaltstypen keine geeignete Größe. Dieses Problem tritt am häufigsten bei Optionsseiten auf, die ihre Inhaltsform basierend auf der Fenstergröße anpassen.

Falls dies ein Problem ist, geben Sie für die Optionsseite feste Mindestmaße an, damit die eingebettete Seite eine angemessene Größe findet.