Geef gebruikers opties

Net zoals extensies gebruikers in staat stellen de Chrome-browser aan te passen, biedt de optiepagina de mogelijkheid om de extensie aan te passen. Gebruik de opties om functies in te schakelen en gebruikers te laten kiezen welke functionaliteit relevant is voor hun behoeften.

De optiepagina vinden

Gebruikers kunnen de optiepagina openen via een directe link of door met de rechtermuisknop op het extensie-icoon in de werkbalk te klikken en vervolgens 'Opties' te selecteren. Daarnaast kunnen gebruikers naar de optiepagina navigeren door eerst chrome://extensions te openen, de gewenste extensie te zoeken, op 'Details' te klikken en vervolgens de link 'Opties' te selecteren.

Schrijf de optiepagina

Hieronder volgt een voorbeeld van een optiepagina:

opties.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Extension Options</title>
  </head>
  <body>
    <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>

Hieronder staat een voorbeeld van een script voor opties. Sla dit bestand op in dezelfde map als options.html . Hiermee worden de voorkeursinstellingen van de gebruiker op alle apparaten opgeslagen met behulp van de storage.sync API.

opties.js:

// Saves options to browser.storage
const saveOptions = () => {
  const color = document.getElementById('color').value;
  const likesColor = document.getElementById('like').checked;

  browser.storage.sync.set(
    { favoriteColor: color, likesColor: likesColor },
    () => {
      // Update status to let user know options were saved.
      const status = document.getElementById('status');
      status.textContent = 'Options saved.';
      setTimeout(() => {
        status.textContent = '';
      }, 750);
    }
  );
};

// Restores select box and checkbox state using the preferences
// stored in browser.storage.
const restoreOptions = () => {
  browser.storage.sync.get(
    { favoriteColor: 'red', likesColor: true },
    (items) => {
      document.getElementById('color').value = items.favoriteColor;
      document.getElementById('like').checked = items.likesColor;
    }
  );
};

document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click', saveOptions);

Voeg tot slot de machtiging "storage" toe aan het manifestbestand van de extensie:

manifest.json:

{
  "name": "My extension",
  ...
  "permissions": [
    "storage"
  ]
  ...
}

Definieer het gedrag van de optiepagina

Er zijn twee soorten optiepagina's voor extensies: volledige pagina's en ingebedde pagina's . Het type optiepagina wordt bepaald door hoe deze in het manifest is gedeclareerd.

Opties voor volledige pagina

Een volledige optiepagina wordt in een nieuw tabblad weergegeven. Registreer het HTML-bestand met de opties in het manifest in het veld "options_page" .

manifest.json:

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

Ingebedde opties

Een ingebedde optiepagina stelt gebruikers in staat om extensie-opties aan te passen zonder de extensiebeheerpagina te verlaten, binnen een ingebed venster. Om ingebedde opties te declareren, registreert u het HTML-bestand onder het veld "options_ui" in het extensiemanifest, waarbij de sleutel "open_in_tab" is ingesteld op false .

manifest.json:

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

page (string)

Specificeert het pad naar de optiepagina, relatief ten opzichte van de rootmap van de extensie.

open_in_tab (boolean)

Geeft aan of de optiepagina van de extensie in een nieuw tabblad wordt geopend. Indien ingesteld op false , wordt de optiepagina van de extensie ingesloten in chrome://extensions in plaats van in een nieuw tabblad geopend.

Houd rekening met de verschillen.

Optiepagina's die zijn ingesloten in chrome://extensions vertonen subtiele gedragsverschillen ten opzichte van optiepagina's in tabbladen.

Link naar de optiepagina

Een extensie kan rechtstreeks naar de optiepagina linken door browser.runtime.openOptionsPage() aan te roepen. Het kan bijvoorbeeld aan een pop-up worden toegevoegd:

pop-up.html:

<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>

popup.js:

document.querySelector('#go-to-options').addEventListener('click', function() {
  if (browser.runtime.openOptionsPage) {
    browser.runtime.openOptionsPage();
  } else {
    window.open(browser.runtime.getURL('options.html'));
  }
});

Tabs API

Omdat ingebedde optiecode niet in een tabblad wordt gehost, kan de Tabs API niet worden gebruikt. Gebruik in plaats daarvan runtime.connect() en runtime.sendMessage() als de optiepagina het betreffende tabblad wel moet manipuleren.

Berichten-API's

Als de optiepagina van een extensie een bericht verzendt met behulp van runtime.connect() of runtime.sendMessage() , wordt het tabblad van de afzender niet ingesteld en is de URL van de afzender de URL van de optiepagina.

Maatvoering

De ingebedde opties zouden automatisch hun eigen grootte moeten bepalen op basis van de pagina-inhoud. Het kan echter voorkomen dat het ingebedde vak voor sommige soorten inhoud geen geschikte grootte vindt. Dit probleem komt het meest voor bij optiepagina's die hun inhoudsvorm aanpassen aan de venstergrootte.

Als dit een probleem is, geef dan vaste minimale afmetingen op voor de optiepagina, zodat de ingesloten pagina een geschikte grootte kan vinden.