Optionsseite
Auf einer Optionsseite können Sie Einstellungen für Ihre Erweiterung festlegen, die Ihre Nutzer ändern können.
Wie Nutzer auf die Seite zugreifen und wie sie in die Benutzeroberfläche des Browsers integriert ist, unterscheidet sich je nach Browser. In Firefox öffnen Nutzer die Optionsseite einer Erweiterung über den Add-ons-Manager.
Ihre Erweiterung kann die Seite programmatisch öffnen, indem sie runtime.openOptionsPage() aufruft.
Für Optionsseiten gilt eine Content Security Policy, die einschränkt, aus welchen Quellen sie Ressourcen laden können, und bestimmte unsichere Praktiken wie die Verwendung von eval() untersagt. Weitere Informationen finden Sie unter Content Security Policy.
Optionsseite festlegen
Um eine Optionsseite zu erstellen, schreiben Sie eine HTML-Datei, die die Seite definiert. Wie eine normale Webseite kann sie CSS- und JavaScript-Dateien einbinden. Diese Seite aus dem Beispiel favourite-colour bindet eine JavaScript-Datei ein:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="color-scheme" content="dark light" />
</head>
<body>
<form>
<label for="color">Favorite color</label>
<input type="text" id="color" name="color" />
<button type="submit">Save</button>
</form>
<script src="options.js"></script>
</body>
</html>
Beachten Sie die Verwendung von <meta name="color-scheme" content="dark light">. Dadurch kann die eingebettete Benutzeroberfläche anhand der Browsereinstellungen des Nutzers automatisch zwischen einem hellen und einem dunklen Design wechseln. Weitere Informationen finden Sie unter <meta name="color-scheme">.
JavaScript, das auf der Seite ausgeführt wird, kann alle WebExtension-APIs verwenden, für die das Add-on Berechtigungen besitzt. Insbesondere können Sie mit der storage-API Einstellungen dauerhaft speichern.
Nehmen Sie die Dateien der Seite in Ihre Erweiterung auf.
Außerdem müssen Sie den Schlüssel options_ui in Ihre manifest.json-Datei aufnehmen und darin die URL der Seite angeben.
"options_ui": {
"page": "options.html"
},
Wie Sie Optionen zwischen Ihrer Optionsseite und Hintergrund- oder Content-Skripten gemeinsam nutzen, erfahren Sie auf der Seite zu options_ui.
Gestaltung der Optionsseite
Wie Sie den Inhalt Ihrer Optionsseite passend zum Stil von Firefox gestalten, erfahren Sie im Acorn Design System.
Beispiele
Das Repository webextensions-examples auf GitHub enthält das Beispiel favourite-colour, das Funktionen einer Optionsseite implementiert.