Geef gebruikers opties

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

De optiepagina zoeken

Gebruikers hebben toegang tot de optiepagina via een directe link of door met de rechtermuisknop op het extensiepictogram in de werkbalk te klikken en vervolgens opties te selecteren. Bovendien kunnen gebruikers naar de optiepagina navigeren door eerst chrome://extensions te openen, de gewenste extensie te zoeken, op Details te klikken en vervolgens de optielink te selecteren.

Link naar de optiepagina in de gebruikersinterface
Link naar de pagina Opties.
Pagina Contextmenuopties
Klik met de rechtermuisknop op het pictogram van de extensie.

Schrijf de optiepagina

Hier 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 ziet u een voorbeeld van een optiescript. Sla het op in dezelfde map als options.html . Hiermee worden de voorkeursopties van de gebruiker op verschillende apparaten opgeslagen met behulp van de storage.sync API.

opties.js:

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

  chrome.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 chrome.storage.
const restoreOptions = () => {
  chrome.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 ten slotte de machtiging "storage" toe aan het manifestbestand van de extensie:

manifest.json:

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

Gedrag van de optiepagina declareren

Er zijn twee soorten pagina's met extensieopties: volledige pagina en ingesloten . Het type optiepagina wordt bepaald door de manier waarop deze in het manifest wordt gedeclareerd.

Opties voor volledige pagina's

Er wordt een pagina met volledige paginaopties weergegeven op een nieuw tabblad. Registreer het HTML-optiesbestand in het manifest in het veld "options_page" .

manifest.json:

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}
Opties voor volledige pagina's
Volledige pagina-opties in een nieuw tabblad.

Ingebouwde opties

Op een ingebedde optiepagina kunnen gebruikers extensie-opties aanpassen zonder weg te hoeven navigeren van de extensiebeheerpagina in een ingesloten vak. 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
  },
  ...
}
Ingebouwde opties
Ingebouwde opties.
page (tekenreeks)
Specificeert het pad naar de optiepagina, relatief ten opzichte van de hoofdmap van de extensie.
open_in_tab (booleaans)
Geeft aan of de optiepagina van de extensie in een nieuw tabblad wordt geopend. Indien ingesteld op false , wordt de optiepagina van de extensie ingebed in chrome://extensions in plaats van geopend op een nieuw tabblad.

Overweeg de verschillen

Optiepagina's die zijn ingebed in chrome://extensions vertonen subtiele gedragsverschillen met optiepagina's op tabbladen.

Link naar de optiepagina

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

popup.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 (chrome.runtime.openOptionsPage) {
    chrome.runtime.openOptionsPage();
  } else {
    window.open(chrome.runtime.getURL('options.html'));
  }
});

Tabbladen-API

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

Berichten-API's

Als de optiepagina van een extensie een bericht verzendt met 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 moeten automatisch hun eigen grootte bepalen op basis van de pagina-inhoud. Het is echter mogelijk dat het ingesloten vak geen goed formaat heeft voor bepaalde soorten inhoud. Dit probleem komt het meest voor bij optiepagina's die de vorm van de inhoud aanpassen op basis van de venstergrootte.

Als dit een probleem is, geef dan vaste minimumafmetingen op voor de optiepagina om ervoor te zorgen dat de ingesloten pagina de juiste grootte krijgt.