Blog
Premiers pas dans le monde merveilleux des extensions Chrome

Partager

On plante le décor

Lorsque l'on travaille dans une boite IT avec (un minimum) de process, il convient d'avoir plusieurs environnements de développement distants :
- environnement de test (idéalement),
- environnement de pré production
- et l’inévitable environnement de production, cela va sans dire.

Parfois, tôt lors d'une matinée calme, un bug est remonte par un client très énervé ! Hop, on s'active les neurones pour l'aider le plus rapidement possible. Notre première action est de vérifier en pré-production que le bug est avéré, autrement dit que ce n'est pas un problème entre la chaise et le clavier.

S'il est avéré, il faut se rendre sur un environnement de développement. Et pour la énième fois, il faut copier notre url interminable, puis la modifier soit par le sous domaine qui correspond à votre environnement si vous avez de la chance, ou bien la modifier complètement. Bref, c'est là que notre extension apparaît : d'un simple clic, on bascule d'un environnement à un autre tout en gardant la bonne url.

Documentation officielle

L'overview de Google est plutôt bien faite. Par contre petit conseil, ne prenez pas trop à la lettre les extensions d'exemple made in google car elles sont pour certaines deprecated et non-fonctionnelles.
Dans notre exemple, nous n'allons pas faire de sous dossier pour ranger proprement nos fichiers mais nous allons tout mettre à la racine pour plus de simplicité.

Manifest

On se rend vite compte que l'on développe sur une techno google, puisque le premier fichier que l'on crée et qui va paramétrer notre extension se nomme 'Manifest.json'.
Ce fichier renseigne le nom de l'extension, ses permissions, ses dépendances, ainsi que sa version ("manifest-version" actuellement à la valeur 2, sinon chrome ne voudra pas lancer l'extension).

{
	"manifest_version": 2, 
	"description": "Quick url",
	"name": "Quick url",
	"version": "1.0", // votre version de développement
	"author" : "BigInt",
	"browser_action" : {
		"default_icon": "icon.png", // icône de l'extension visible dans le navigateur
		"default_title": "Quick url",
		"default_popup": "popup.html" // Html de votre extension
	},
	"permissions": [
		"tabs",  // droits sur les onglets
		"<all_urls>", // les droits sur n'importe quelle url
	],
	"web_accessible_resources" : ["jquery-1.10.2.min.map"], //jquery(plus-bas) s'en sert
	"content_scripts": [
	{
		"matches" : ["<all_urls>"], // notre extension pourra interagir avec toutes les url
      		"js": [
				"jquery-1.10.2.min.js", // évidemment pas obligatoire
				"script.js",  // javascript avec la page courante
				"popup.js" // javascript en lien avec l'extension elle même
			],
	        "run_at":     "document_end"
    	}
  	]
}

Mise en forme

Le fichier popup.html va décrire la mise en forme html que va prendre notre extension. Attention : il n'est plus possible de mettre des scripts js inline dans ce fichier. A vous de vous faire plaisir sur cette mise en forme. Voici un exemple moins sexy :

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="popup.js"></script>
		<link rel="stylesheet" type="text/css" href="popup.css">
	</head>
	<body>
		<header>
			<div id="logo"></div>
		</header>
		<div id="wrapper">
			<p>iDealWine : </p>
			<ul>
				<li title="Raccourci : ctrl + shift + e"><a href="" id="preprod">Préprod</a></li>
				<li title="Raccourci : ctrl + alt + e"><a href="" id="prod">Prod</a></li>
			</ul>
			<br />
		</div>
		<footer>
			<span class="copyright">BigInt Extension © 2014</span>
		</footer>
	</body>
</html>

Je vous laisse le soin de faire le css dans le fichier popup.css.

Scripts Js - Communication entre les fichiers avec le système de message

Le script.js va nous permettre d’interagir avec la page courante, nous allons pouvoir changer L’URL et recharger la page.
Popup.js va nous permettre de configurer les actions de notre extension, au click sur un lien du menu nous allons pouvoir effectuer une action spécifique.
Pour communiquer entre ces deux fichiers nous allons utiliser le système de message de l'API de chrome. Pour résumer simplement :

  • lors du click sur un menu de l'extension, popup.js catch le click
  • Il envoie un message avec en paramètre quel lien a été cliqué.
  • Script.js va écouter ce message et lire le paramètre
  • Il va changer l'url courante du navigateur en exécutant du javascript côté client (un bon old school "window.location.href = "http://(...)").

C'est comme si on avait deux pages séparées : l'extension avec son propre javascript et la page courante (l'onglet) avec son javascript également.


Exemple script.js :

/* Listen for message from the popup */
$(document).ready(function () {
	chrome.runtime.onMessage.addListener(function(msg, sender, response) {
	    if (typeof(msg.url) != 'undefined') {
	    	var path = window.location.pathname;
	    	window.location.href = msg.url + path;
	    }
	});
});
Exemple popup.js :
window.addEventListener("DOMContentLoaded", function() {
	function sendmessage(url) {
		chrome.tabs.query({
				active: true,
				currentWindow: true
			}, function(tabs) {
				chrome.tabs.sendMessage(
						tabs[0].id,
						{ 	url :  url}
						);
		});
	};
	document.getElementById('preprod').onclick = function() {
		sendmessage('http://preprod.idealwine.com');
	};
	document.getElementById('prod').onclick = function() {
		sendmessage('http://www.idealwine.com');
	};
}, false);

Conclusion

Pour être honnête, c'est relativement laborieux à prendre en main, il faut bien se familiariser avec l'API de chrome. Une fois cette étape dépassée, vous pouvez mettre en forme des features plutôt sympa dans une extension chrome. N'hésitez pas à les partager en commentaire ;)

comments powered by Disqus