Permettez aux utilisateurs de personnaliser le comportement d'une extension en fournissant une page d'options. Un utilisateur peut afficher
les options d'une extension en effectuant un clic droit sur l'icône de l'extension dans la barre d'outils, puis en sélectionnant "Options", ou
en accédant à la page de gestion des extensions à l'adresse chrome://extensions, en recherchant l'extension souhaitée,
en cliquant sur Détails, puis en sélectionnant le lien "Options".
Écrire la page d'options
Vous trouverez ci-dessous un exemple de page d'options.
<!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>
Enregistrez les options préférées d'un utilisateur sur tous les appareils à l'aide de 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);
Déclarer le comportement de la page d'options
Il existe deux types de pages d'options d'extension disponibles : pleine page et intégrée. Le type d'options est déterminé par la façon dont il est déclaré dans le fichier manifeste.
Options pleine page
La page d'options d'une extension s'affiche dans un nouvel onglet. Le fichier HTML des options est enregistré sous le champ options_page.
{
"name": "My extension",
...
"options_page": "options.html",
...
}
Options intégrées
Les options intégrées permettent aux utilisateurs de modifier les options d'extension sans quitter la page de gestion des extensions dans une zone intégrée. Pour déclarer des options intégrées, enregistrez le fichier HTML sous le champ options_ui dans le fichier manifeste de l'extension, avec la clé open_in_tab définie sur "false".
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
page(string)Chemin d'accès à la page d'options, par rapport à la racine de l'extension.
open_in_tab(boolean)Spécifiez
falsepour déclarer une page d'options intégrée. Si la valeur esttrue, la page d'options de l'extension s'ouvre dans un nouvel onglet au lieu d'être intégrée dans chrome://extensions.
Tenir compte des différences
Les pages d'options intégrées dans chrome://extensions présentent quelques différences de comportement subtiles, car elles ne sont pas hébergées dans leurs propres onglets.
Créer un lien vers la page d'options
Une extension peut créer un lien direct vers la page d'options en appelant
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
Le code de la page d'options intégrée de l'extension n'est pas hébergé dans un onglet, ce qui affecte la façon dont l'API Tabs peut être utilisée :
- tabs.query ne trouvera jamais d'onglet dans l'URL de la page d'options d'une extension.
- tabs.onCreated ne se déclenchera pas lorsque la page d'options sera ouverte.
- tabs.onUpdated ne se déclenchera pas lorsque l'état de chargement de la page d'options changera.
- tabs.connect ou tabs.sendMessage ne peuvent pas être utilisés pour communiquer avec la page d'options.
L'utilisation de runtime.connect et runtime.sendMessage permet de contourner ces restrictions si la page d'options doit manipuler l'onglet contenant.
API de messagerie
Si la page d'options d'une extension envoie un message à l'aide de runtime.connect ou runtime.sendMessage, l'onglet de l'expéditeur ne sera pas défini et l'URL de l'expéditeur sera l'URL de la page d'options.
Dimensionnement
Les options intégrées doivent déterminer automatiquement leur propre taille en fonction du contenu de la page. Toutefois, la zone intégrée peut ne pas trouver une taille adaptée à certains types de contenu. Ce problème est plus fréquent pour les pages d'options qui ajustent la forme de leur contenu en fonction de la taille de la fenêtre.
Si cela pose problème, fournissez des dimensions minimales fixes pour la page d'options afin de vous assurer que la page intégrée trouve une taille appropriée.