Dans ce précédent billet, j’expliquais comment développer une extension (assez basique) pour le navigateur Google Chrome.
Maintenant allons plus loin en faisant une extension qui interroge un fichier distant (PHP, ASP, JSP, …), dans mon exemple, j’ai utilisé du PHP !
Comme je souhaite créer une extension pour Google Chrome qui dialogue avec un fichier distant pour récupérer des données d’une BDD par exemple, je vais créer une extension + un fichier PHP (qui sera hébergé sur un FTP distant (OVH, 1and1, Free, …) qui traitera les données.
Pour que mon extension Google Chrome (XHTML/Javascript) interroge mon fichier PHP, je vais utiliser JSON …
Voici le code du fichier « manifest.json »
{
"name" : "MonExt",
"version" : "1.0",
"description" : "Une extension dynamique",
"icons" : {
"48": "icone48.png",
"128" : "icone128.png"
},
"browser_action" : {
"default_icon" : "icone.png",
"default_title" : "MonExt",
"popup" : "monExt.html",
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
]
}
}
Le fichier « monExt.html »
Explications :
- getRemoteData(url) : va créer la balise SCRIPT directement dans le HEAD du fichier « monExt.html »
- sendDatas() : va envoyer les données au fichier distant qui les traitera et qui enverra une réponse (response.data)
- myFunction() : va réceptionner la réponse du script distant et pourra la traiter (dans l’exemple, elle affiche un message dans un INPUT)
Le script PHP « monfichierdistant.php »
$json = "{ data: 'VOICI DES DONNEES !!' }";
if (isset($_GET['callback'])) {
echo $_GET['callback'].'('.$json.');';
} else {
echo $json;
}
Il va renvoyer une chaine « VOICI DES DONNEES !! » qui s’affichera dans l’INPUT … (ATTENTION à bien respecter la mise en forme de la chaîne de retour, qui est { data: xxxx } où xxxx est votre donnée à transmettre) !
A partir de ce script, vous pouvez développer des tas de fonctionnalités :
- Récupérer des données depuis une base de données, …
- Créer un formulaire d’ajout de données, …
- Afficher une galerie d’images, …
- Etc …
Ressources :
- Source : JSONP et appel distant avec PHP
- Archive ZIP des fichiers HTML, JSON et PHP de l’article : à récupérer ici
Mots clés : appel fichier distant, chromium, extension chrome, extension chromium, extension google chrome, fichier distant, google chrome, json, json javascript, json php
