Options d’une extension Chrome

Juin 24, 2016 | jQuery / js | 0 commentaire

Notez que cet article a été écrit il y a plus de 2 ans, mais il n'est pas forcément obsolète.

Pour permettre aux utilisateurs de personnaliser le comportement d’une extension Chrome, on voudra peut-être fournir une page d’options. On peut le faire dans une page d’options accessible par un clic droit sur l’icone de l’extension, ou sur la page des extensions.

Dans le cas présent, j’ai choisi de mettre les options dans la page popup.html, qui apparaît avec un clic sur l’icone de l’extension. Dans les deux cas, le stockage et la modification des données se feront de la même façon.

Options utilisateur d'une extension Chrome.
Options utilisateur d’une extension Chrome.

Pour ajouter des options modifiables par l’utilisateur dans une extension Chrome, il faut d’abord ajouter la permission storage au manifest.json. Cela permettra d’utiliser l’API de stockage de Chrome:

1
2
3
4
5
6
7
8
9
10
11
12
13
...
 
"options_page": "options.html", // Si l'on choisit une page d'options
 
"permissions": [
...
 
"storage",
 
...
],
 
...

On construit alors la page d’options options.html, ou popup.html (pour montrer les options dans le popup). Dans le cas présent, il y a une liste de boutons radios et une case à cocher.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/popup.css">
</head>
 
<body>
<p>__MSG_stringPopup__</p>
<p>__MSG_chooseConverter__</p>
<div id="converter">
      <input type="radio" name="converter" value="http://www.clipconverter.cc" id="clipconverter" />&nbsp;<label for="clipconverter">Clip Converter</label>
      <br />
      <input type="radio" name="converter" value="http://www.flvto.biz" id="flvto" />&nbsp;<label for="flvto">FLV to</label>
      <br />
      <input type="radio" name="converter" value="http://www.onlinevideoconverter.com/video-converter" id="onlinevideoconverter" />&nbsp;<label for="onlinevideoconverter">Online Video Converter</label>
      <br />
      <input type="radio" name="converter" value="http://convert2mp3.net" id="converttomp3" />&nbsp;<label for="converttomp3">Convert to mp3</label>
      <br />
      <input type="radio" name="converter" value="http://2conv.com" id="2conv" />&nbsp;<label for="2conv">2conv.com</label>
      <br />
      <input type="radio" name="converter" value="https://www.youtube2mp3.cc" id="youtube2mp3" />&nbsp;<label for="youtube2mp3">Youtube 2 mp3</label>
      <br />
      <input type="radio" name="converter" value="http://mp3fiber.com" id="mp3fiber" />&nbsp;<label for="mp3 Fiber">MP3 Fiber</label>
      <p>
      <input type="checkbox" name="disableCSS" id="disableCSS" /><label for="disableCSS">__MSG_disableCSS__</label>
      </p>
</div>
<p id="status"></p>
<p id="murviel"><a href="http://murviel-info.com" target="_blank">Murviel-Info</a></p>
 
 
<script type="text/javascript" src="js/popup.js"></script>
<script type="text/javascript" src="js/i18n.js"></script>
</body>
</html>

Le fichier javaScript popup.js se charge de définir les options par défaut et de sauvegarder les données de l’utilisateur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var save_options = function() {
var checked = document.querySelector( 'input[name="converter"]:checked' );
var converter = checked.value;
var id = checked.id;
var disableCSS = document.getElementById( 'disableCSS' ).checked;
chrome.storage.sync.set({
converter: converter,
id: id,
disableCSS: disableCSS
}, function() {
var status = document.getElementById( 'status' );
status.textContent = chrome.i18n.getMessage( 'optionsSaved' );
setTimeout( function() {
status.textContent = '';
}, 750 );
});
}
 
var restore_options = function() {
chrome.storage.sync.get({
converter: 'http://www.clipconverter.cc',
id: 'clipconverter',
disableCSS: false
}, function( items ) {
var id = items.id;
document.getElementById( id ).checked = true;
document.getElementById( 'disableCSS' ).checked = items.disableCSS;
});
}
 
document.addEventListener( 'DOMContentLoaded', function() {
 
restore_options();
 
var radios = document.querySelectorAll( 'input[name="converter"]:not(:checked)' );
for( var i = 0; i < radios.length; i++ ) {
radios[i].addEventListener( 'click', save_options );
}
var disableCSS = document.getElementById( 'disableCSS' );
disableCSS.addEventListener( 'click', save_options );
});

Dans popup.html, il faut attendre le chargement du DOM. On écoute l’événement click sur les boutons radio et la boite à cocher. La fonction restore_options récupère les valeurs enregistrées de l’utilisateur (ou les valeurs par défaut), save_options sauvegarde les données lorsque l’utilisateur les modifie.

Et hop, de jolies options pour l’extension Chrome. La structure pour tout élément de formulaire reste la même.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *