Tout comme les extensions permettent aux utilisateurs de personnaliser le navigateur Chrome, la page d'options leur permet la personnalisation de l'extension. Utilisez les options pour activer les fonctionnalités et permettre aux utilisateurs de choisir quelle fonctionnalité correspond à leurs besoins.
Localiser la page d'options
Les utilisateurs peuvent accéder à la page des 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 des options en ouvrant chrome://extensions, en recherchant l'extension souhaitée, en cliquant sur Détails, puis en sélectionnant le lien des options.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">É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 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 manifeste de l'extension:
manifest.json:
{
"name": "My extension",
...
"permissions": [
"storage"
]
...
}
Déclarer le comportement de la page d'options
Il existe deux types de pages d'options d'extension : les pages en pleine page et les pages intégrées. Le type est déterminée par la façon dont elle est déclarée dans le fichier manifeste.
Options de pleine page
Une page d'options pleine page 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 de modifier les options des extensions sans quitter le
une page de gestion des extensions dans une fenêtre intégrée. Pour déclarer des options intégrées, enregistrez le code HTML
sous le champ "options_ui" dans le 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(booléen)- Indique si la page d'options de l'extension doit être 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 dans les onglets.
Lien vers la page d'options
Une extension peut créer un lien direct vers la page des 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 des options intégrées n'est pas hébergé dans un onglet, l'API Tabs ne peut pas être utilisée.
Utilisez runtime.connect() et runtime.sendMessage() à la place.
si la page d'options a besoin de manipuler
l'onglet parent.
API de messagerie
Si la page d'options d'une extension envoie un message à l'aide de l'icône 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, il est possible que la taille de la fenêtre intégrée ne soit pas adaptée à certains types de contenu. Ce problème est le plus courant pour qui ajustent la forme de leur contenu en fonction de la taille de la fenêtre.
Si c'est un problème, indiquez des dimensions minimales fixes pour la page des options afin de vous assurer que intégrée aura une taille appropriée.