Mes premiers plug-in Google chrome : Blogasty share et Snake

Publié le 2 février 2010

Editorial

blogastyshare Mes premiers plug in Google chrome : Blogasty share et SnakeHier, en visitant la galerie de plug-in de Google chrome, je me suis dit : « tiens, c’est compliqué, un plug-in Google Chrome ? » . En regardant un peu la documentation de Google, je me suis rendu compte que la base est vraiment très simple.

C’est ainsi, que j’ai créé mon premier plug-in : Blogasty share. Un plug-in qui permet de partager facilement une page sur Twitter, Facebook, Delicious, Gmail et Blogasty, évidement.

Evidement, ce n’est pas un gros truc mais, il m’est utile à moi et ça me permet de tâter un peu le code.

S’il vous intéresse et que vous avez des idées de fonctionnalités utiles et simples à lui ajouter, vous pouvez  toujours me le proposer dans les commentaires.

Ensuite, j’ai attaqué la construction d’un petit jeu de Snake avec JQuery. Encore plus simple car celui-ci ne nécéssite aucune interaction avec le navigateur.

snakechrome Mes premiers plug in Google chrome : Blogasty share et Snake

Ce blog n‘ayant pas comme but de proposer des tutos, je vais expliquer juste les bases à ceux qui peuvent être intéressés.

Le fichier de base contenant les infos essentielles se nomme : manifest.json

Dans celui-ci se trouvent les données informatives

{
"name": "Ma premiere app",
"version": "1.0",
"description": "Description de ma premiere app ",
"icons": { "48": "icon48.png",
"128": "icon128.png" },
"browser_action": {
"default_icon": "icon16.png",
"default_title": " Ma premiere app ",
"popup": "application.html"
},
"permissions": [
"tabs"
]
}

Attention aux permissions, elles sont importantes. Ici, j’ai inséré « tabs » afin de pouvoir utiliser les onglets.

L’application est en fait une page html classique : application.html

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
width:180px;
}
</style>
<script>
//code js
function ouvrirunonglet(url) {
chrome.tabs.create({"url": url});
}
</script>
</head>
<body>
contenu html
<a href="#" onClick="ouvrirunonglet('http://techtrends.eu/')" title="un lien">Techtrends</a>
</body>
</html>

Comme vous le voyez, c’est très simple. Par contre, il y a des spécificités, ainsi, un lien sortant s’écrit en Javascript avec chrome.tabs.create
A vous de jouer, maintenant

Blogasty share et Snake

la diffusion d’annonces sur ce site relève de ma responsabilité et ne représente pas les positions d'une entreprise pour laquelle je travaille

Rédigé par

Christophe Lefevre, spécialiste du SEO et des réseaux sociaux pour les nouveaux médias.

Sur Techtrends, je partage le fruit de ma veille numérique et mes réflexions autour des tendances du web, des médias et nouvelles technologies.

Egalement sur Editorial (43 sur 165 articles)