Tout comme les extensions permettent aux utilisateurs de personnaliser le navigateur Chrome, la page d'options permet de personnaliser l'extension. Utilisez des options pour activer des fonctionnalités et permettre aux utilisateurs de choisir celles qui répondent à leurs besoins.
Localiser la page d'options
Les utilisateurs peuvent accéder à la page d'options à l'aide d'un lien direct ou en effectuant un clic droit sur l'icône de l'extension dans la barre d'outils, puis en sélectionnant les options. De plus, les utilisateurs peuvent accéder à la page d'options en ouvrant chrome://extensions, en recherchant l'extension souhaitée, en cliquant sur Détails, puis en sélectionnant le lien des options.
Écrire la page d'options
Voici un exemple de page d'options:
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>
Vous trouverez ci-dessous un exemple de script d'options. Enregistrez-le dans le même dossier que options.html.
Les options préférées de l'utilisateur sont ainsi enregistrées sur tous les appareils à l'aide de 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);
Enfin, ajoutez l'autorisation "storage" au fichier manifest de l'extension:
manifest.json:
{
"name": "My extension",
...
"permissions": [
"storage"
]
...
}
Comportement de la page "Déclarer des options"
Il existe deux types de pages d'options d'extension : la page complète et la intégrée. Le type de page d'options est déterminé par la manière dont il est déclaré dans le fichier manifeste.
Options pleine page
Une page d'options complète s'affiche dans un nouvel onglet. Enregistrez le fichier HTML des options dans le champ "options_page" du fichier manifeste.
manifest.json:
{
"name": "My extension",
...
"options_page": "options.html",
...
}
Options intégrées
Une page d'options intégrées permet aux utilisateurs d'ajuster les options des extensions 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" du fichier manifeste de l'extension, avec la clé "open_in_tab" définie sur false.
manifest.json:
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
page(chaîne)- Spécifie le chemin d'accès à la page d'options, par rapport à la racine de l'extension.
open_in_tab(boolean)- Indique si la page d'options de l'extension sera ouverte dans un nouvel onglet. Si elle est définie sur
false, la page d'options de l'extension est intégrée danschrome://extensionsau lieu d'être ouverte dans un nouvel onglet.
Tenez compte des différences
Les pages d'options intégrées dans chrome://extensions présentent de légères différences de comportement par rapport aux pages d'options des onglets.
Lien vers la page des options
Une extension peut créer un lien direct vers la page d'options en appelant chrome.runtime.openOptionsPage(). Par exemple, vous pouvez l'ajouter à un pop-up:
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
Étant donné que le code d'options intégré n'est pas hébergé dans un onglet, vous ne pouvez pas utiliser l'API Tabs.
Utilisez plutôt runtime.connect() et runtime.sendMessage() si la page d'options a besoin de manipuler l'onglet conteneur.
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 n'est pas défini, et l'URL de l'expéditeur sera l'URL de la page d'options.
Taille
Les options d'intégration doivent déterminer automatiquement leur propre taille en fonction du contenu de la page. Cependant, la zone intégrée peut ne pas trouver une taille adaptée pour certains types de contenu. Ce problème est le plus courant 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 trouvera une taille appropriée.