Offrire opzioni agli utenti

Consenti agli utenti di personalizzare il comportamento di un'estensione fornendo una pagina di opzioni. Per visualizzare le opzioni di un'estensione, un utente può fare clic con il pulsante destro del mouse sull'icona dell'estensione nella barra degli strumenti e selezionare le opzioni oppure andare alla pagina di gestione dell'estensione all'indirizzo chrome://extensions, individuare l'estensione desiderata, fare clic su Dettagli e selezionare il link delle opzioni.

Scrivi la pagina delle opzioni

Di seguito è riportato un esempio di pagina di opzioni.

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

Dichiara il comportamento della pagina delle opzioni

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

Opzioni a pagina intera

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

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

Opzioni a pagina intera

Opzioni incorporate

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 un'opzione incorporata, registra il file HTML nel campo options_ui del file 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 incorporate

  • page (stringa)

    Percorso della pagina delle opzioni, relativo alla directory principale dell'estensione.

  • open_in_tab (boolean)

    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é incorporata in chrome://extensions.

Considera le differenze

Le pagine delle opzioni incorporate all'interno di chrome://extensions presentano alcune sottili differenze di comportamento dovute al fatto che non sono ospitate all'interno delle loro schede.

Collegamento alla pagina delle opzioni

Un'estensione può collegarsi direttamente alla pagina delle opzioni chiamando il numero 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 delle estensioni non è ospitato all'interno di una scheda e influisce sul modo in cui può essere utilizzata l'API Tabs:

  • tabs.query non troverà mai una scheda all'interno dell'URL della pagina di opzioni di un'estensione.
  • tabs.onCreated non si attiva all'apertura della pagina delle opzioni.
  • tabs.onUpdated non viene attivato quando lo stato di caricamento della pagina delle opzioni viene modificato.
  • Non è possibile utilizzare tabs.connect o tabs.sendMessage per comunicare con la pagina delle opzioni.

L'utilizzo di runtime.connect e runtime.sendMessage consente di aggirare queste limitazioni, nel caso in cui la pagina delle opzioni debba manipolare la scheda che la contiene.

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 dovrebbero 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 è più comune per le pagine di opzioni che regolano la forma dei contenuti in base alle dimensioni della finestra.

Se si tratta di un problema, fornisci dimensioni minime fisse per la pagina delle opzioni in modo che la pagina incorporata trovi una dimensione appropriata.