Geef gebruikers opties

Geef gebruikers de mogelijkheid om het gedrag van een extensie aan te passen door een optiepagina aan te bieden. Een gebruiker kan de opties van een extensie bekijken door met de rechtermuisknop op het extensie-icoon in de werkbalk te klikken en vervolgens 'Opties' te selecteren, of door naar de pagina voor extensiebeheer te gaan op chrome://extensions , de gewenste extensie te zoeken, op 'Details' te klikken en vervolgens de link 'Opties' te selecteren.

Schrijf de optiepagina

Hieronder ziet u een voorbeeld van een optiepagina.

<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>

Favorite color:
<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>

Bewaar de voorkeursinstellingen van een gebruiker op verschillende apparaten met behulp van de storage.sync API.

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById('color').value;
  var likesColor = document.getElementById('like').checked;
  chrome.storage.sync.set({
    favoriteColor: color,
    likesColor: likesColor
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
  // Use default value color = 'red' and likesColor = true.
  chrome.storage.sync.get({
    favoriteColor: 'red',
    likesColor: true
  }, function(items) {
    document.getElementById('color').value = items.favoriteColor;
    document.getElementById('like').checked = items.likesColor;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
    save_options);

Definieer het gedrag van de optiepagina

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

Opties voor volledige pagina

De optiepagina van een extensie wordt in een nieuw tabblad weergegeven. Het HTML-bestand met de opties staat geregistreerd onder het veld options_page .

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

Opties voor volledige pagina

Ingebedde opties

Met ingebedde opties kunnen gebruikers extensie-instellingen aanpassen 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.

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

Ingebedde opties

  • page (string)

    Pad naar de optiepagina, relatief ten opzichte van de rootmap van de extensie.

  • open_in_tab (boolean)

    Geef dit op als false om een ​​ingebedde optiepagina te declareren. Als true , wordt de optiepagina van de extensie in een nieuw tabblad geopend in plaats van ingebed in chrome://extensions .

Houd rekening met de verschillen.

Optiepagina's die zijn ingesloten in chrome://extensions vertonen subtiele gedragsverschillen doordat ze niet in hun eigen tabbladen worden gehost.

Link naar de optiepagina

Een extensie kan rechtstreeks naar de optiepagina linken door chrome.runtime.openOptionsPage() aan te roepen.

<button id="go-to-options">Go to options</button>

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

Tabs API

De code van de optiepagina van de extensie wordt niet in een tabblad gehost, wat gevolgen heeft voor de manier waarop de Tabs API kan worden gebruikt:

Het gebruik van runtime.connect en runtime.sendMessage is een manier om deze beperkingen te omzeilen, mocht de optiepagina het betreffende tabblad moeten manipuleren.

Berichten-API's

Als de optiepagina van een extensie een bericht verzendt met behulp van runtime.connect of runtime.sendMessage , wordt het tabblad '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.