À chacun ses goûts
June 28 2011
Je vous propose ici, par l'intermédiaire d'un exemple qui vous sera peut-être utile, de découvrir le fonctionnement d'une extension pour le navigateur Chrome/ Chromium.
L'occasion par ailleurs, d'utiliser ensuite, vos propres CSS, pour les sites de votre choix, d'utiliser des thèmes réservés aux membres...
Tout d'abord, il faut créer un dossier où créer le projet :
Il faut ensuite créer le fichier JSON qui servira de point d'entrée à l'extension : "manifest.json"
Code :
JavaScript
"
{
"name": "CSS Chooser",
"version": "1.0",
"description": "To choose another css.",
"background_page": "background.html",
"browser_action": {
"default_icon": "icon.png",
"popup" : "popup.html"
},
"permissions": [
"tabs",
"http://*/*"
]
}
"
"
{
"name": "CSS Chooser",
"version": "1.0",
"description": "To choose another css.",
"background_page": "background.html",
"browser_action": {
"default_icon": "icon.png",
"popup" : "popup.html"
},
"permissions": [
"tabs",
"http://*/*"
]
}
"
Comme on peut le remarquer, on attribue un nom, une version, une description, une page à appeler; puis une autre page à appeler si l'on clique sur l'icône juste au-dessus définie. Les permissions, permettent de détermier la zone d'action de l'extension.
La page appelée par défaut au lancement est ici "background.html" :
Code :
HTML
"
<html>
<head>
<script>
/* Add a listener to fire an action on update of the tab */
chrome.tabs.onUpdated.addListener(function(tab) {
/* execute a script in a specified file */
chrome.tabs.executeScript(null, {file: "CSSChooser.js"});
});
</script>
</head>
</html>
"
"
<html>
<head>
<script>
/* Add a listener to fire an action on update of the tab */
chrome.tabs.onUpdated.addListener(function(tab) {
/* execute a script in a specified file */
chrome.tabs.executeScript(null, {file: "CSSChooser.js"});
});
</script>
</head>
</html>
"
Le contenu de cette page est injecté dans toutes les pages du navigateur. Ainsi, on ajoute un listeneur qui, lorsqu'il détecte une modification de l'onglet, appelle un script qui s'occupera du traitement.
Le traitement à proprement parler, dans cet exemple, est le remplacement d'un fichier CSS par un autre, spécifié par l'utilisateur "CSSChooser.js" :
Code :
JavaScript
"
/* Find the "link" elements */
var elements = document.getElementsByTagName("link");
/* Creating a table with the name of the css to remove, and the name of the one to replace */
var arrayCSS =
[
/* to replace, to replace with */
["http://mathieuprevel.fr/themes/Carbon/Carbon.css", "http://mathieuprevel.fr/themes/Bzh/Bzh.css"],
["http://AddYourOwnWebsiteCssToRemove.css", "http://AddYourOwnWebsiteCssToReplaceWith.css"]
];
for (var i = 0; i < elements.length; i++) {
if(elements.getAttribute("rel") == "stylesheet") {
for (var j = 0; j < arrayCSS.length; j++) {
if(elements[i].getAttribute("href") == arrayCSS[j][0]) {
elements[i].setAttribute("href", arrayCSS[j][1]);
}
}
}
}
"
"
/* Find the "link" elements */
var elements = document.getElementsByTagName("link");
/* Creating a table with the name of the css to remove, and the name of the one to replace */
var arrayCSS =
[
/* to replace, to replace with */
["http://mathieuprevel.fr/themes/Carbon/Carbon.css", "http://mathieuprevel.fr/themes/Bzh/Bzh.css"],
["http://AddYourOwnWebsiteCssToRemove.css", "http://AddYourOwnWebsiteCssToReplaceWith.css"]
];
for (var i = 0; i < elements.length; i++) {
if(elements.getAttribute("rel") == "stylesheet") {
for (var j = 0; j < arrayCSS.length; j++) {
if(elements[i].getAttribute("href") == arrayCSS[j][0]) {
elements[i].setAttribute("href", arrayCSS[j][1]);
}
}
}
}
"
popup.html est le fichier chargé lors du clic sur l'icone. Je n'y ai mis que du texte.
Pour l'installation :
Cliquer sur la clé > Outils > Extensions > Charger l'extension non empaquetée
[i]Si vous faîtes des modifications, pensez à rafraîchir l'extension.
Amusez-vous bien
