Nutzern Optionen anbieten

Ermöglichen Sie Nutzern, das Verhalten einer Erweiterung anzupassen, indem Sie eine Optionsseite bereitstellen. Ein Nutzer kann die Optionen einer Erweiterung aufrufen, indem er mit der rechten Maustaste auf das Erweiterungssymbol in der Symbolleiste klickt und dann „Optionen“ auswählt. Alternativ kann er die Seite zur Erweiterungsverwaltung unter chrome://extensions aufrufen, die gewünschte Erweiterung suchen, auf Details klicken und dann den Link zu den Optionen auswählen.

Optionsseite schreiben

Unten sehen Sie ein Beispiel für eine Optionsseite.

<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>

Favorite color:
<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>

Mit der storage.sync API können Sie die bevorzugten Optionen eines Nutzers geräteübergreifend speichern.

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById('color').value;
  var likesColor = document.getElementById('like').checked;
  chrome.storage.sync.set({
    favoriteColor: color,
    likesColor: likesColor
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
  // Use default value color = 'red' and likesColor = true.
  chrome.storage.sync.get({
    favoriteColor: 'red',
    likesColor: true
  }, function(items) {
    document.getElementById('color').value = items.favoriteColor;
    document.getElementById('like').checked = items.likesColor;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
    save_options);

Verhalten der Optionsseite deklarieren

Es gibt zwei Arten von Optionsseiten für Erweiterungen: Ganzseitig und Eingebettet. Der Typ der Optionen wird durch die Deklaration im Manifest bestimmt.

Optionen für die gesamte Seite

Die Optionsseite einer Erweiterung wird in einem neuen Tab angezeigt. Die HTML-Datei für die Optionen ist im Feld options_page registriert.

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

Optionen für die gesamte Seite

Eingebettete Optionen

Mit eingebetteten Optionen können Nutzer Erweiterungsoptionen anpassen, ohne die Seite zur Verwaltung von Erweiterungen 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.

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}

Eingebettete Optionen

  • page (String)

    Pfad zur Optionsseite relativ zum Stammverzeichnis der Erweiterung.

  • open_in_tab (boolesch)

    Geben Sie false an, um eine eingebettete Optionsseite zu deklarieren. Wenn true, wird die Optionsseite der Erweiterung in einem neuen Tab geöffnet, anstatt in chrome://extensions eingebettet zu werden.

Unterschiede berücksichtigen

Optionsseiten, die in chrome://extensions eingebettet sind, weisen einige subtile Verhaltensunterschiede auf, da sie nicht auf eigenen Tabs gehostet werden.

Verknüpfung mit der Seite „Optionen“

Eine Erweiterung kann direkt auf die Optionsseite verweisen, indem sie chrome.runtime.openOptionsPage() aufruft .

<button id="go-to-options">Go to options</button>

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

Der Code für die eingebettete Optionsseite der Erweiterung wird nicht auf einem Tab gehostet. Das wirkt sich auf die Verwendung der Tabs API aus:

  • Mit tabs.query wird nie ein Tab in der URL der Optionsseite einer Erweiterung gefunden.
  • tabs.onCreated wird nicht ausgelöst, wenn die Optionsseite geöffnet wird.
  • tabs.onUpdated wird nicht ausgelöst, wenn sich der Seitenaufbau-Status der Optionsseite ändert.
  • tabs.connect oder tabs.sendMessage können nicht für die Kommunikation mit der Optionsseite verwendet werden.

Die Verwendung von runtime.connect und runtime.sendMessage ist eine Umgehung dieser Einschränkungen, 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 für einige Arten von Inhalten möglicherweise keine geeignete Größe. Dieses Problem tritt am häufigsten bei Optionsseiten auf, deren Inhalt sich an die Fenstergröße anpasst.

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