Udvikling af browserudvidelser til Chrome og Edge · Lektion

Opbygning af en indstillingsside

Design og implementér en permanent indstillingsside, hvor brugerne kan konfigurere udvidelsens indstillinger og præferencer.

Lektion 2 af 411 trin

Opbygning af en indstillingsside er en gratis Udvikling af browserudvidelser til Chrome og Edge-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af browserudvidelser til Chrome og Edge, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Hvorfor bruge en indstillingsside?

En indstillingsside er en dedikeret brugerflade til din udvidelse, hvor brugerne kan tilpasse indstillinger og præferencer. Tænk på den som din udvidelses kontrolpanel!

Den giver brugerne et fast sted, hvor de kan konfigurere, hvordan din udvidelse opfører sig.
Indstillinger, der gemmes her, bevares, selvom browseren lukkes.
Den adskiller sig fra en pop op, som er beregnet til hurtige, midlertidige interaktioner.

Grundlæggende HTML til indstillinger

Alle indstillingssider begynder med en HTML-fil. Denne fil indeholder strukturen for din indstillingsbrugerflade.

Opret en fil med navnet options.html i rodmappen til din udvidelse. Den er ligesom ethvert andet HTML-dokument.

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

Tilknytning af indstillinger i manifestet

Hvis du vil fortælle din browserudvidelse, hvor indstillingssiden findes, skal du erklære den i din manifest.json-fil.

Brug nøglen options_page, som peger på din HTML-fil. Det gør siden tilgængelig via browserens brugerflade til administration af udvidelser.

{
  "name": "My Options Extension",
  "version": "1.0",
  "manifest_version": 3,
  "options_page": "options.html"
}

Gør indstillingerne flotte

Ligesom på enhver anden webside kan du style din indstillingsside med CSS, så den passer til din udvidelses visuelle identitet eller bliver nemmere at bruge.

Opret en options.css-fil, og indsæt et link til den i din options.html. Her er en enkel begyndelse:

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;
}

Lagring af brugerpræferencer

Hvis indstillingerne skal bevares, bruger vi API'et chrome.storage. Det giver din udvidelse mulighed for at gemme data, som bevares på tværs af browsersessioner.

chrome.storage.sync gemmer data, der synkroniseres på tværs af enheder, mens chrome.storage.local kun gemmer data på den aktuelle enhed. Lad os bruge sync til indstillingerne.

// 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!');
  });
});

Indlæsning af gemte præferencer

Når indstillingssiden åbnes, vil du gerne indlæse tidligere gemte indstillinger, så de kan vises for brugeren.

Brug chrome.storage.sync.get() til at hente data. Det bør normalt ske, når DOM-indholdet er indlæst helt.

// options.js
document.addEventListener('DOMContentLoaded', () => {
  chrome.storage.sync.get(['username'], (result) => {
    if (result.username) {
      document.getElementById('usernameInput').value = result.username;
    }
  });
});

Opret en kontakt til mørk tilstand

Lad os oprette en simpel kontakt til mørk tilstand. Dette eksempel kombinerer HTML, CSS og JavaScript for at gemme og indlæse en brugers præference for et mørkt tema.

Vi bruger et afkrydsningsfelt til at styre temaet og gemmer dets tilstand med 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>

Sådan åbner brugerne indstillingerne

Brugere kan få adgang til indstillingssiden for din udvidelse på flere måder:

Højreklik på din udvidelses ikon på værktøjslinjen, og vælg »Indstillinger«.
Gå til browserens side til administration af udvidelser (f.eks. chrome://extensions), find din udvidelse, og klik på »Detaljer« og derefter »Indstillinger for udvidelsen«.

Der er ingen standardknap i pop op-vinduet, så du skal tilføje en, hvis du vil linke til siden derfra (det gennemgås i en senere lektion om kommunikation mellem brugergrænseflader).

Tip til brugeroplevelsen på indstillingssiden

Gode indstillingssider er intuitive og nemme at bruge. Her er nogle tip:

Angiv standardværdier: Sæt altid fornuftige standardværdier for dine indstillinger.
Øjeblikkelig feedback: Vis en meddelelse som »Gemt!«, når indstillingerne ændres.
Tydelige etiketter: Brug beskrivende tekst til inputfelter og afkrydsningsfelter.
Organiser: Gruppér relaterede indstillinger logisk, især i komplekse udvidelser.

Kontrol af indstillingssiden

Lad os kontrollere din forståelse af indstillingssider, og hvordan de fungerer.

Besvar den i den interaktive lektion

Opsummering af indstillingssiden

Godt klaret! Du har lært at opbygge en persistent indstillingsside til din browserudvidelse.

En indstillingsside lader brugere tilpasse indstillinger.
Den erklæres ved hjælp af options_page i manifest.json.
Du bruger chrome.storage.sync eller local til at gemme og indlæse præferencer.
En god brugeroplevelse er afgørende for en brugervenlig indstillingsside.

Derefter undersøger vi, hvordan forskellige dele af din udvidelse kan kommunikere med hinanden!

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Opbygning af en indstillingsside” gratis?

Ja — hele teksten til “Opbygning af en indstillingsside” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af browserudvidelser til Chrome og Edge-kurset, skal du opgradere til CoddyKit PRO. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Opbygning af en indstillingsside”?

Design og implementér en permanent indstillingsside, hvor brugerne kan konfigurere udvidelsens indstillinger og præferencer. Du øver dig i Udvikling af browserudvidelser til Chrome og Edge med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Udvikling af browserudvidelser til Chrome og Edge?

Der kræves ingen tidligere erfaring. Udvikling af browserudvidelser til Chrome og Edge på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Opbygning af en indstillingsside”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Udvikling af browserudvidelser til Chrome og Edge-lektion?

Ja. Alle Udvikling af browserudvidelser til Chrome og Edge-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Oprettelse af interaktiv popup-brugergrænseflade
Opbygning af en indstillingsside
Kommunikation mellem UI-komponenter
Tematisering med CSS og understøttelse af mørk tilstand

← Tilbage til Udvikling af browserudvidelser til Chrome og Edge