Così come le estensioni consentono agli utenti di personalizzare il browser Chrome, la pagina delle opzioni consente la personalizzazione dell'estensione. Usa le opzioni per abilitare le funzionalità e consentire agli utenti di scegliere le funzionalità più adatte alle loro esigenze.
Individuazione della pagina delle opzioni
Gli utenti possono accedere alla pagina delle opzioni tramite un link diretto o facendo clic con il tasto destro del mouse sull'icona dell'estensione nella barra degli strumenti, quindi selezionando le opzioni. Inoltre, gli utenti possono passare alla pagina delle opzioni, aprendo innanzitutto chrome://extensions, individuando l'estensione desiderata, facendo clic su Dettagli e selezionando il link delle opzioni.
Scrivi la pagina delle opzioni
Di seguito è riportato un esempio di pagina di opzioni:
options.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>
Di seguito è riportato uno script di opzioni di esempio. Salvalo nella stessa cartella con il nome options.html.
In questo modo, le opzioni preferite dell'utente vengono salvate su tutti i dispositivi utilizzando l'API storage.sync.
options.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);
Infine, aggiungi l'autorizzazione "storage" al file manifest dell'estensione:
manifest.json:
{
"name": "My extension",
...
"permissions": [
"storage"
]
...
}
Dichiara il comportamento della pagina delle opzioni
Esistono due tipi di pagine con opzioni di estensione: a pagina intera e incorporate. Il tipo di pagina delle opzioni dipende dal modo in cui viene dichiarato nel manifest.
Opzioni a pagina intera
In una nuova scheda viene visualizzata una pagina di opzioni a pagina intera. Registra il file HTML delle opzioni nel file manifest nel campo "options_page".
manifest.json:
{
"name": "My extension",
...
"options_page": "options.html",
...
}
Opzioni incorporate
Una pagina di opzioni incorporate consente 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 file manifest dell'estensione, con la chiave "open_in_tab" impostata su false.
manifest.json:
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
page(stringa)- Specifica il percorso della pagina delle opzioni in relazione alla directory principale dell'estensione.
open_in_tab(boolean)- Indica se la pagina delle opzioni dell'estensione verrà aperta in una nuova scheda. Se è impostata su
false, la pagina delle opzioni dell'estensione viene incorporata inchrome://extensionsanziché aperta in una nuova scheda.
Considera le differenze
Le pagine delle opzioni incorporate in chrome://extensions presentano lievi differenze di comportamento rispetto alle pagine delle opzioni delle schede.
Link alla pagina delle opzioni
Un'estensione può rimandare direttamente alla pagina delle opzioni chiamando il numero
chrome.runtime.openOptionsPage(). Ad esempio, può essere aggiunto a un popup:
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'));
}
});
API Tabs
Poiché il codice delle opzioni incorporate non è ospitato in una scheda, non è possibile utilizzare l'API Tabs.
Usa invece runtime.connect() e runtime.sendMessage() se la pagina delle opzioni deve manipolare la scheda che lo contiene.
API di messaggistica
Se la pagina delle opzioni di un'estensione invia un messaggio utilizzando runtime.connect() o runtime.sendMessage(), la scheda del 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.