Eine Optionsseite erstellen
Entwerfen und implementieren Sie eine dauerhafte Optionsseite, auf der Benutzer Einstellungen und Präferenzen der Erweiterung konfigurieren können.
Eine Optionsseite erstellen ist eine kostenlose Browser Extensions Development (Chrome & Edge)-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Browser Extensions Development (Chrome & Edge)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Browser Extensions Development (Chrome & Edge)-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Why Use an Options Page?
An options page is a dedicated UI for your extension where users can customize settings and preferences. Think of it as your extension's control panel!
- It provides a persistent place for users to configure how your extension behaves.
- Settings saved here stick around even if the browser closes.
- It's different from a popup, which is for quick, transient interactions.
Basic Options HTML
Every options page starts with an HTML file. This file will contain the structure of your settings interface.
Create a file named options.html in your extension's root directory. It's just like any other HTML document.
<!DOCTYPE html>
<html>
<head>
<title>My Extension Options</title>
<link rel="stylesheet" href="options.css">
</head>
<body>
<h1>Extension Settings</h1>
<p>Customize your extension here.</p>
<script src="options.js"></script>
</body>
</html>Linking Options in Manifest
To tell your browser extension where its options page is, you need to declare it in your manifest.json file.
Use the options_page key, pointing to your HTML file. This makes the page accessible via the browser's extension management UI.
{
"name": "My Options Extension",
"version": "1.0",
"manifest_version": 3,
"options_page": "options.html"
}Making Options Look Good
Just like any web page, you can style your options page using CSS to match your extension's branding or improve usability.
Create an options.css file and link it in your options.html. Here's a simple start:
body {
font-family: Arial, sans-serif;
padding: 20px;
min-width: 300px;
}
h1 {
color: #333;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
}Saving User Preferences
To make settings persistent, we use the chrome.storage API. It allows your extension to store data that persists across browser sessions.
chrome.storage.sync stores data synced across devices, while chrome.storage.local stores data only on the current device. Let's use sync for settings.
// options.js
document.getElementById('saveButton').addEventListener('click', () => {
const username = document.getElementById('usernameInput').value;
chrome.storage.sync.set({ 'username': username }, () => {
console.log('Username saved!');
alert('Settings saved!');
});
});Loading Saved Preferences
When the options page opens, you'll want to load any previously saved settings to display them to the user.
Use chrome.storage.sync.get() to retrieve data. This should typically happen when the DOM content is fully loaded.
// options.js
document.addEventListener('DOMContentLoaded', () => {
chrome.storage.sync.get(['username'], (result) => {
if (result.username) {
document.getElementById('usernameInput').value = result.username;
}
});
});Building a Dark Mode Toggle
Let's create a simple dark mode toggle. This example combines HTML, CSS, and JavaScript to save and load a user's preference for a dark theme.
We'll use a checkbox to control the theme and save its state using chrome.storage.sync.
<!DOCTYPE html>
<html>
<head>
<title>Theme Options</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
min-width: 300px;
transition: background-color 0.3s, color 0.3s;
}
body.dark-mode {
background-color: #222;
color: #eee;
}
h1 {
color: #333;
}
body.dark-mode h1 {
color: #eee;
}
</style>
</head>
<body>
<h1>Theme Settings</h1>
<label>
<input type="checkbox" id="darkModeToggle">
Enable Dark Mode
</label>
<script>
const darkModeToggle = document.getElementById('darkModeToggle');
// Load saved preference
document.addEventListener('DOMContentLoaded', () => {
chrome.storage.sync.get(['darkMode'], (result) => {
darkModeToggle.checked = result.darkMode || false;
document.body.classList.toggle('dark-mode', darkModeToggle.checked);
});
});
// Save preference on change
darkModeToggle.addEventListener('change', () => {
const isDarkMode = darkModeToggle.checked;
chrome.storage.sync.set({ 'darkMode': isDarkMode }, () => {
document.body.classList.toggle('dark-mode', isDarkMode);
console.log('Dark mode preference saved:', isDarkMode);
});
});
</script>
</body>
</html>How Users Open Options
Users can access your extension's options page in a few ways:
- Right-click on your extension's icon in the toolbar and select 'Options'.
- Go to the browser's extension management page (e.g.,
chrome://extensions), find your extension, and click 'Details', then 'Extension options'.
There's no default button in the popup, you need to add one if you want to link from there (covered in a later lesson on UI communication).
Options Page UX Tips
Good options pages are intuitive and easy to use. Here are some tips:
- Provide Defaults: Always set sensible default values for your settings.
- Instant Feedback: Show a 'Saved!' message after settings are changed.
- Clear Labels: Use descriptive text for input fields and checkboxes.
- Organize: Group related settings logically, especially for complex extensions.
Options Page Check
Let's check your understanding of options pages and how they work.
Options Page Recap
Great job! You've learned how to build a persistent options page for your browser extension.
- An options page lets users customize settings.
- It's declared using
options_pageinmanifest.json. - You use
chrome.storage.syncorlocalto save and load preferences. - Good UX is key for a user-friendly options page.
Next, we'll explore how different parts of your extension can communicate with each other!
Häufig gestellte Fragen
Ist die Lektion „Eine Optionsseite erstellen“ kostenlos?
Ja — der vollständige Text von „Eine Optionsseite erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Browser Extensions Development (Chrome & Edge)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Browser Extensions Development (Chrome & Edge)-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Eine Optionsseite erstellen“?
Entwerfen und implementieren Sie eine dauerhafte Optionsseite, auf der Benutzer Einstellungen und Präferenzen der Erweiterung konfigurieren können. Du übst Browser Extensions Development (Chrome & Edge) mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Browser Extensions Development (Chrome & Edge) zu starten?
Keine Vorkenntnisse erforderlich. Browser Extensions Development (Chrome & Edge) auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Eine Optionsseite erstellen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Browser Extensions Development (Chrome & Edge)-Lektion Code schreiben und ausführen?
Ja. Jede Browser Extensions Development (Chrome & Edge)-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Interaktive Popup-Oberflächen erstellen
- Eine Optionsseite erstellen
- Kommunikation zwischen UI-Komponenten
- Theming mit CSS und Unterstützung für den Dark Mode