Offrire opzioni agli utenti

Consentire agli utenti di personalizzare il comportamento di un'estensione fornendo una pagina delle opzioni. Un utente può visualizzare le opzioni di un'estensione facendo clic con il tasto destro del mouse sull'icona dell'estensione nella barra degli strumenti e selezionando le opzioni oppure andando alla pagina di gestione delle estensioni all'indirizzo chrome://extensions, individuando l'estensione desiderata, facendo clic su Dettagli e poi selezionando il link alle opzioni.

Scrivere la pagina delle opzioni

Di seguito è riportata una pagina delle opzioni di esempio.

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

Salva le opzioni preferite di un utente su più dispositivi utilizzando l'API storage.sync.

// 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);

Dichiarare il comportamento della pagina delle opzioni

Sono disponibili due tipi di pagine di opzioni di estensione: a pagina intera e incorporata. Il tipo di opzioni è determinato dal modo in cui viene dichiarato nel manifest.

Opzioni per la pagina intera

La pagina delle opzioni di un'estensione viene visualizzata in una nuova scheda. Il file HTML delle opzioni è elencato registrato nel campo options_page.

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

Opzioni per la pagina intera

Opzioni di incorporamento

Le opzioni incorporate consentono agli utenti di modificare le opzioni delle estensioni senza uscire dalla pagina di gestione delle estensioni all'interno di una casella incorporata. Per dichiarare le opzioni incorporate, registra il file HTML nel campo options_ui del manifest dell'estensione, con la chiave open_in_tab impostata su false.

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

Opzioni di incorporamento

  • page (stringa)

    Percorso alla pagina delle opzioni, relativo alla radice dell'estensione.

  • open_in_tab (booleano)

    Specifica come false per dichiarare una pagina di opzioni incorporata. Se true, la pagina delle opzioni dell'estensione verrà aperta in una nuova scheda anziché essere incorporata in chrome://extensions.

Considera le differenze

Le pagine delle opzioni incorporate in chrome://extensions presentano alcune sottili differenze di comportamento correlate al fatto di non essere ospitate nelle proprie schede.

Collegamento alla pagina delle opzioni

Un'estensione può collegarsi direttamente alla pagina delle opzioni chiamando chrome.runtime.openOptionsPage() .

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

API Tabs

Il codice della pagina delle opzioni incorporate dell'estensione non è ospitato all'interno di una scheda, il che influisce sul modo in cui è possibile utilizzare l'API Tabs:

  • tabs.query non troverà mai una scheda all'interno dell'URL della pagina delle opzioni di un'estensione.
  • tabs.onCreated non viene attivato quando viene aperta la pagina delle opzioni.
  • tabs.onUpdated non si attiverà quando cambia lo stato di caricamento della pagina delle opzioni.
  • tabs.connect o tabs.sendMessage non possono essere utilizzati per comunicare con la pagina delle opzioni.

L'utilizzo di runtime.connect e runtime.sendMessage è una soluzione alternativa a queste limitazioni, se la pagina delle opzioni deve manipolare la scheda contenitore.

API di messaggistica

Se la pagina delle opzioni di un'estensione invia un messaggio utilizzando runtime.connect o runtime.sendMessage, la scheda Mittente non verrà impostata e l'URL del mittente sarà l'URL della pagina delle opzioni.

Taglie

Le opzioni incorporate devono determinare automaticamente le proprie dimensioni in base ai contenuti della pagina. Tuttavia, la casella incorporata potrebbe non trovare una dimensione adatta per alcuni tipi di contenuti. Questo problema si verifica più spesso nelle pagine delle opzioni che modificano la forma dei contenuti in base alle dimensioni della finestra.

Se questo è un problema, fornisci dimensioni minime fisse per la pagina delle opzioni per assicurarti che la pagina incorporata trovi una dimensione appropriata.