Printf

Créer sa propre extension pour Google Chrome – 2éme Partie

Florian Blary

Si vous atterrissez sur cette page, il s’agit de la 2éme partie d’un tutoriel pour créer une extension Google, ce tutoriel commence ici.

Dans cette partie nous allons nous intéresser aux tâches de fond, c’est à dire les actions qui vont être effectuées lorsqu’un nouvel onglet va être ouvert,
Dans notre cas on veut vérifier que la page a déjà été visité, et si oui, récupérer les informations que l’utilisateur a rentré pour cette offre.

Voici donc le fichier background.html dont je vous parlais dans la 1ère partie : 

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script src="scripts.js">
 </head>
 <body onload="launchFunction(changeIcon);setTimeout('location.reload(true);',50);">
 </body>
</html>

En gros on ne fait que charger un fichier javascript, puis quand la tab se charge on regarde si l’utilisateur est déjà venu, et on fait cette vérification régulièrement si l’utilisateur enregistre la page en cours pour changer d’icône dés qu’il enregistre la page.

function open_tab(url)
{
chrome.tabs.create({"url": url});
}

function launchFunction(callback,fenetre,onglet)
{
if (!fenetre)

{
chrome.windows.getLastFocused(function(fenetre){launchFunction(callback,fenetre);});
}
else
{
if (!onglet)
{
chrome.tabs.getSelected(fenetre.id,function(onglet){launchFunction(callback,fenetre,onglet);});
}
else
{
callback(onglet);
}
}
}

function checkStorage(onglet)
{
var affichage=document.getElementById('affichage');
document.getElementById('adresse').innerHTML='Notes pour '+onglet.title+'';
if (localStorage['addappart_||'+onglet.url])
{
var info = localStorage['addappart_||'+onglet.url].split("||"); 
affichage.value=info[0];
document.getElementById('adresse').innerHTML='Notes pour '+onglet.title+' (note du '+info[1]+')';

for (i=0; i<5; i++)
{
y = i+1;
note = info[3];

if(y == note)
{
document.getElementById('note0'+y).checked=true;
}
else 
{
document.getElementById('note0'+y).checked=false;
}
}
}
else
{
affichage.value='';
affichage.setAttribute('placeholder','Aucune donnée enregistrée pour cette offre');

for (i=0; i<5; i++)
{
y = i+1;

if(y == 1)
{
document.getElementById('note0'+y).checked=true;
}
else 
{
document.getElementById('note0'+y).checked=false;
}
}
}

$(document).ready(function() {

$("ul.notes-echelle").addClass("js");
$("ul.notes-echelle li").addClass("note-off");

$("ul.notes-echelle input")
.focus(function() {
$(this).parents("ul.notes-echelle").find("li").removeClass("note-focus");
$(this).parent("li").addClass("note-focus");
$(this).parent("li").nextAll("li").addClass("note-off");
$(this).parent("li").prevAll("li").removeClass("note-off");
$(this).parent("li").removeClass("note-off");
})
.blur(function() {
$(this).parents("ul.notes-echelle").find("li").removeClass("note-focus");
if($(this).parents("ul.notes-echelle").find("li input:checked").length == 0) {
$(this).parents("ul.notes-echelle").find("li").addClass("note-off");
}
})


$("ul.notes-echelle input:checked").parent("li").trigger("mouseover");
$("ul.notes-echelle input:checked").trigger("click");

});
}

function changeIcon(onglet)
{
if (localStorage['addappart_||'+onglet.url])
{
chrome.browserAction.setIcon({path: 'ok.png'});
}
else
{
chrome.browserAction.setIcon({path: 'icone.png'});
}
}

function save(onglet)
{
ladate = new Date;

var note = document.getElementsByName("notes");
for (i=0; i<5; i++)
if (note[i].checked)
la_note = note[i].value;

localStorage['addappart_||'+onglet.url]=document.getElementById('affichage').value+'||'+ladate.getDate()+"/"+(ladate.getMonth()+1)+"/"+ladate.getFullYear()+'||'+onglet.title+'||'+la_note;
location.reload();
}

function deleteNote(clef)
{
var bool=confirm('Voulez-vous vraiment supprimer cette offre ?');
if (bool)
{
localStorage.removeItem(localStorage.key(clef))
location.reload();
}
}

function suppr(onglet)
{
localStorage.removeItem(localStorage.key('addappart_||'+onglet.url))
location.reload();
}

function readNote(clef,onglet)
{
if (!onglet)
{
chrome.tabs.getCurrent(function(onglet){readNote(clef,onglet);});
}
else
{
chrome.tabs.update(onglet.id,{url:'pages/afficher.html?'+clef});
}
}


function seeAll(stars)
{
var lire='';
var adresse='';
var supprimer='';
var compteur=0;
for (var i=0; i ';
document.write(''+info[2]+''+supprimer+'');
compteur++;
}
}
}
if (compteur==0)
{
document.write('Aucune donnée enregistrée.')
}
}

Et ci-dessus, le fameux script.js qui regroupe toutes les fonctions utilisées.
Je vous l’accorde ce n’est pas très développé mais avec çà vous pourrez partir avec de bonnes bases pour créer d’autres extensions !

La suite dans la 3éme partie !

Laisser un commentaire