Nutzern Optionen anbieten

So wie Nutzer den Chrome-Browser mit Erweiterungen anpassen können, können sie auch Erweiterungen über die Optionsseite anpassen. Verwenden Sie Optionen, um Funktionen zu aktivieren und Nutzern die Möglichkeit zu geben, die für ihre Anforderungen relevanten Funktionen auszuwählen.

Optionsseite aufrufen

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

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

Optionsseite schreiben

Hier sehen Sie ein Beispiel für 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 geräteübergreifend mithilfe der storage.sync API gespeichert.

options.js:

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

  browser.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 browser.storage.
const restoreOptions = () => {
  browser.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 zum Schluss die Berechtigung "storage" in die Manifestdatei der Erweiterung ein:

manifest.json:

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

Verhalten der Optionsseite deklarieren

Es gibt zwei Arten von Optionsseiten für Erweiterungen: Vollbildseite und eingebettete Seite. Der Typ der Optionsseite wird durch die Deklaration im Manifest bestimmt.

Optionen für die gesamte Seite

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

manifest.json:

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}
Optionen für die gesamte Seite
Vollbildoptionen in einem neuen Tab.

Eingebettete Optionen

Auf einer Seite mit eingebetteten Optionen können Nutzer Erweiterungsoptionen anpassen, ohne die Seite zur Erweiterungsverwaltung in einem eingebetteten Feld zu verlassen. Wenn Sie eingebettete Optionen deklarieren möchten, registrieren Sie die HTML-Datei im Erweiterungsmanifest unter dem Feld "options_ui". Der Schlüssel "open_in_tab" muss auf false gesetzt sein.

manifest.json:

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}
Eingebettete Optionen
Optionen für eingebettete Inhalte.
page (string)
Gibt den Pfad zur Optionsseite relativ zum Stammverzeichnis der Erweiterung an.
open_in_tab (boolesch)
Gibt an, ob die Optionsseite der Erweiterung in einem neuen Tab geöffnet wird. Wenn false festgelegt ist, wird die Optionsseite der Erweiterung in chrome://extensions eingebettet, anstatt in einem neuen Tab geöffnet zu werden.

Unterschiede berücksichtigen

Optionsseiten, die in chrome://extensions eingebettet sind, weisen geringfügige Verhaltensunterschiede zu Optionsseiten in Tabs auf.

Link zur Seite mit den Optionen

Eine Erweiterung kann direkt zur Optionsseite verlinken, indem browser.runtime.openOptionsPage() aufgerufen wird. 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 (browser.runtime.openOptionsPage) {
    browser.runtime.openOptionsPage();
  } else {
    window.open(browser.runtime.getURL('options.html'));
  }
});

Tabs API

Da der Code für eingebettete Optionen nicht auf einem Tab gehostet wird, kann die Tabs API nicht verwendet werden. Verwenden Sie stattdessen runtime.connect() und runtime.sendMessage(), wenn die Optionsseite den enthaltenden Tab bearbeiten muss.

Messaging-APIs

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

Größe

Die Größe der eingebetteten Optionen sollte automatisch anhand des Seiteninhalts bestimmt werden. Allerdings findet die eingebettete Box möglicherweise nicht für alle Arten von Inhalten eine geeignete Größe. Dieses Problem tritt am häufigsten bei Optionsseiten auf, deren Inhalt sich an die Fenstergröße anpasst.

Wenn dies ein Problem ist, geben Sie feste Mindestabmessungen für die Optionsseite an, damit die eingebettete Seite eine geeignete Größe erhält.