Nutzern Optionen anbieten

Nutzer können das Verhalten einer Erweiterung über eine Optionsseite anpassen. Ein Nutzer kann die Optionen einer Erweiterung aufrufen, indem er in der Symbolleiste mit der rechten Maustaste auf das Erweiterungssymbol klickt und Optionen auswählt. Alternativ können er die Seite zur Erweiterungsverwaltung unter chrome://extensions aufrufen, nach der gewünschten Erweiterung suchen, auf Details klicken und dann den Link für die Optionen auswählen.

Seite mit Optionen schreiben

Unten sehen Sie ein Beispiel für eine Seite mit Optionen.

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

Funktionsweise der Seite „Optionen für Deklarationen“

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

Vollständige Seitenoptionen

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

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

Vollständige Seitenoptionen

Eingebettete Optionen

Mit eingebetteten Optionen können Nutzer die Erweiterungsoptionen anpassen, ohne die Seite zur Verwaltung von Erweiterungen in einem eingebetteten Feld verlassen zu müssen. Wenn Sie eingebettete Optionen angeben möchten, registrieren Sie die HTML-Datei unter dem Feld options_ui im Manifest der Erweiterung, wobei der Schlüssel open_in_tab auf „false“ gesetzt ist.

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

Eingebettete Optionen

  • page (String)

    Pfad zur Seite mit den Optionen, relativ zum Stamm der Erweiterung.

  • open_in_tab (boolean)

    Geben Sie false an, um eine eingebettete Optionsseite zu deklarieren. Bei true wird die Seite mit den Optionen der Erweiterung in einem neuen Tab geöffnet und nicht in chrome://extensions eingebettet.

Unterschiede berücksichtigen

In chrome://extensions eingebettete Optionsseiten weisen einige geringfügige Verhaltensunterschiede auf, da sie nicht auf eigenen Tabs gehostet werden.

Link zur Seite „Optionen“

Eine Erweiterung kann durch Aufrufen von chrome.runtime.openOptionsPage() direkt mit der Seite mit den Optionen verlinkt werden .

<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 Seitencode für eingebettete Optionen in einer Erweiterung wird nicht auf einem Tab gehostet. Dies wirkt sich darauf aus, wie die Tabs API verwendet werden kann:

  • Mit tabs.query wird niemals ein Tab in der URL der Optionsseite einer Erweiterung gefunden.
  • tabs.onCreated wird beim Öffnen der Seite „Optionen“ nicht ausgelöst.
  • tabs.onUpdated wird nicht ausgelöst, wenn sich der Ladestatus der Seite mit den Optionen ändert.
  • tabs.connect oder tabs.sendMessage kann nicht für die Kommunikation mit der Optionsseite verwendet werden.

Mit runtime.connect und runtime.sendMessage können Sie diese Einschränkungen umgehen, wenn die Seite mit den Optionen den übergeordneten Tab bearbeiten muss.

Messaging-APIs

Wenn über die Optionsseite einer Erweiterung eine Nachricht mit runtime.connect oder runtime.sendMessage gesendet wird, wird der Tab des Absenders nicht festgelegt. In diesem Fall ist die URL des Absenders die URL der Optionsseite.

Größen

Die Größe der eingebetteten Optionen sollte anhand des Seiteninhalts automatisch 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.