Proprio come le estensioni consentono agli utenti di personalizzare il browser Chrome, la pagina delle opzioni consente la personalizzazione dell'estensione. Utilizza le opzioni per attivare le funzionalità e consentire agli utenti di scegliere quali funzionalità sono pertinenti alle loro esigenze.
Individuare la pagina delle opzioni
Gli utenti possono accedere alla pagina delle opzioni tramite link diretto o facendo clic con il tasto destro del mouse sull'icona dell'estensione nella barra degli strumenti e selezionando le opzioni. Inoltre, gli utenti possono accedere alla pagina delle opzioni aprendo chrome://extensions, individuando l'estensione desiderata, facendo clic su Dettagli e poi selezionando il link alle opzioni.
Scrivere la pagina delle opzioni
Di seguito è riportato un esempio di pagina delle 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 un esempio di script di opzioni. Salvalo nella stessa cartella di 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 browser.storage
const saveOptions = () => {
const color = document.getElementById('color').value;
const likesColor = document.getElementById('like').checked;
browser.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 browser.storage.
const restoreOptions = () => {
browser.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"
]
...
}
Dichiarare il comportamento della pagina delle opzioni
Esistono due tipi di pagine delle opzioni di estensione: a pagina intera e incorporata. Il tipo di pagina delle opzioni è determinato dal modo in cui viene dichiarata nel manifest.
Opzioni a pagina intera
In una nuova scheda viene visualizzata una pagina delle opzioni a pagina intera. Registra il file HTML delle opzioni nel manifest nel campo "options_page".
manifest.json:
{
"name": "My extension",
...
"options_page": "options.html",
...
}
Opzioni di incorporamento
Una pagina 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 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, relativo alla radice dell'estensione.
open_in_tab(booleano)- Indica se la pagina delle opzioni dell'estensione verrà aperta in una nuova scheda. Se è impostato su
false, la pagina delle opzioni dell'estensione viene incorporata inchrome://extensionsanziché essere aperta in una nuova scheda.
Considera le differenze
Le pagine delle opzioni incorporate in chrome://extensions hanno differenze di comportamento sottili rispetto alle pagine delle opzioni nelle schede.
Link alla pagina delle opzioni
Un'estensione può collegarsi direttamente alla pagina delle opzioni chiamando
browser.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 (browser.runtime.openOptionsPage) {
browser.runtime.openOptionsPage();
} else {
window.open(browser.runtime.getURL('options.html'));
}
});
API Tabs
Poiché il codice delle opzioni incorporate non è ospitato in una scheda, non è possibile utilizzare l'API Tabs.
Utilizza runtime.connect() e runtime.sendMessage() invece,
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 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 si verifica più spesso per le 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.