Browser Extensions Development (Chrome & Edge) · Leçon

Créer une page d’options

Concevez et implémentez une page d’options persistante permettant aux utilisateurs de configurer les paramètres et les préférences de l’extension.

Leçon 2 sur 411 étapes

Créer une page d’options est une leçon Browser Extensions Development (Chrome & Edge) gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Browser Extensions Development (Chrome & Edge), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Réponds-y dans la leçon interactive

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_page in manifest.json.
You use chrome.storage.sync or local to 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!

Gratuit pour commencer

Apprends JavaScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 12
Leçons: 48

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Créer une page d’options » est-elle gratuite ?

Oui — le texte complet de « Créer une page d’options » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Browser Extensions Development (Chrome & Edge), passe à CoddyKit PRO. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Créer une page d’options » ?

Concevez et implémentez une page d’options persistante permettant aux utilisateurs de configurer les paramètres et les préférences de l’extension. Tu pratiques Browser Extensions Development (Chrome & Edge) avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Browser Extensions Development (Chrome & Edge) ?

Aucune expérience préalable n'est requise. Browser Extensions Development (Chrome & Edge) sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Créer une page d’options » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Browser Extensions Development (Chrome & Edge) ?

Oui. Chaque leçon Browser Extensions Development (Chrome & Edge) inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Créer une interface contextuelle interactive
Créer une page d’options
Communication entre les composants de l’interface
Thèmes avec CSS et prise en charge du mode sombre

← Retour à Browser Extensions Development (Chrome & Edge)