Sommaire
Récapitulatif:
- Partie 1 – Introduction
- Partie 2 – Faire Baver un peu
- Partie 3 – ça code sévère
Allez trêve de bavardage chef, cette fois-ci, on boucle la bête ;)
Nous avions donc créé le plugin dans sa quasi totalité…les plugins sont OK, les codes aussi… Il ne reste plus qu’a créer notre tâche de fond et notre interface qui affichera nos positions. On y va.
Le background JS
C’est lui qui va jouer à interval régulier à « Attrape moi google si tu peux » :p facile, toute les X heures, le script va chercher dans la base de donnée tous les mots clés et pour chacun ira voir si nous sommes dans les 100 premiers.
/*================== START JQUERY CODE =========================*/
(function ($){
$(document).ready(function(){
/*================== GO ========================================*/
$.DB.open();
$.DB.createTable();
var TimerInterval = localStorage["TimerInterval"] || 60*5;//60*5;
console.log(localStorage);
console.log(1000*60*TimerInterval);
/**
@TODO
- Timer parser les feeds
- Compteur Vert, Rouge
- Envoi vers popup
**/
var newsCount = 0;
function checkPosition(url,keyword,position){
var Url = $('<a>').attr('href',url);
var urlPos = $(Url).serpposition({
keywords:keyword,
addResOn:'#resultats'
});
urlPos = parseInt(urlPos);
var lastPos = parseInt(position);
var direction = '';
var differenceBetween;
console.log(url);
console.log(urlPos);
if(urlPos > lastPos ){
differenceBetween = (urlPos - lastPos);
direction = '- ' +differenceBetween;
}else if (urlPos < lastPos){
differenceBetween = (lastPos - urlPos);
direction = '+ ' +differenceBetween;
}else{
direction = ' =';
}
$.DB.updateData(url,keyword,urlPos+' '+direction);
//notifyHTML('notification.html','http://toto.com','test',15000);
var html = urlPos+' sur le mot: '+keyword;
notify(url,html,1000*5);
}
setInterval(function() {
$.DB.getAllDatasItems(function(tx,results){
//console.log(results.rows.length);
for (var i = 0; i < results.rows.length; i++) {
// console.log('I:'+i);
var url = results.rows.item(i).url;
var keyword = results.rows.item(i).keyword;
var position = results.rows.item(i).position;
// console.log('Url: '+url+' Last Article: '+lastArticle);
//interval
checkPosition(url,keyword,position);
}
});
}, 1000*60*TimerInterval);//60*5);//Toutes les 5 Heures
/*===================== END JQUERY CODE =======================*/
}); // end jQuery Ready
})(jQuery);
Qu’est ce qui se passe ici ? C’est facile, on a une fonction qui tourne en boucle toute les 5 heures ( 60*5, option qui peut être stocké dans localStorage ), et toute les 5 heures donc, cette fonction va en appeler une autre, celle qui cherche dans la base de donnée et cherche les positions.
Comme les données peuvent avoir changé et que personne ne nous le dira avant que nous n’ayons été voir dans les options, une petite fenêtre en bas à droite de l’écran va apparaitre pour indiquer les changement ( rapide, pas trop embétant et elle ne restera là que 5 secondes, le temps de lire ).
Le code n’est pas tout clean car il provient d’une autre extension mais le principe est là…le moteur peut se mettre en marche ! A chaque check de position, le background va également vérifier la différence entre la dernière position et la position toute fraîche…Il pour ainsi ajouté un petit +2 ou – 5 ou encore un = si les positions changent ou non.
Tout est dans la base de donnée, il ne reste plus qu’a afficher tout ça dans les options:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Demo Seo Position</title>
<link rel="stylesheet" type="text/css" href="css/options.css" />
<script type="text/javascript" src="js/libs/jquery.min.js"></script>
<script type="text/javascript" src="js/libs/webDB.js"></script>
<script type="text/javascript" src="js/libs/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/helpers.js"></script>
</head>
<body>
<div class="container">
<img src="../img/icon128.png" />
<h3>
Vos Données
</h3>
<p><a class="deleteAll" href="#" onclick="return confirm('Certain ?');">Tout Supprimer</a> | <a class="refreshAll" href="#">Rafraîchir</a></p>
<p class="more">
<!-- AFFICHAGE DES DONNEES -->
<table id="DBItems" cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>Url</th>
<th>Keyword</th>
<th>Position</th>
<th>Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!--
DATAS HERE
-->
</tbody>
</table>
</p>
<h3>Export</h3>
<textarea id="urlExport" style="width: 100%;height:200px;"></textarea>
<br clear="all" />
</div>
<script type="text/javascript">
$(document).ready(function () {
/*------------------------------- CONFIGURATION ---------------------------------*/
console.log(localStorage);
/*------------------------------- DATABASE -----------------------------------*/
//$("#hectorDBItems").tablesorter();
$.DB.open(); /*setInterval(function(){*/
$.DB.getAllDatasItems(loadDatasItems); /*}, 15000);*/
$.DB.getAllDatasItemsByCat(loadDatasItemsByCat);
$('.deleteAll').click(function () {
$.DB.cleanTable(); /*location.reload(true);*/
});
$('.refreshAll').click(function () {
$('#DBItems > tbody').empty();
$.DB.getAllDatasItems(loadDatasItems);
});
$.DB.delData = function (id) {
$.DB.deleteData(id);
$('#DBItems > tbody').empty();
$.DB.getAllDatasItems(loadDatasItems);
}
function loadDatasItems(tx, rs) {
//url;categorie;publication( 1 ou 0 );url serveur | categorie, isPublish, urlToPublish
var datas = '';
for (var i = 0; i < rs.rows.length; i++) {
datas += renderTodo(rs.rows.item(i));
}
var $rowOutput = (datas);
$('#DBItems > tbody').empty();
$('#DBItems > tbody').append($rowOutput);
$("#DBItems").tablesorter({
widthFixed: true,
widgets: ['zebra']
}) /*.tablesorterPager({container: $("#pager")})*/
;
}
function loadDatasItemsByCat(tx,rs){
//getAllDatasItemsByCat
var urlsToExport='Url;keyword;positionn';
for (var i = 0; i < rs.rows.length; i++) {
urlsToExport += $.trim(rs.rows.item(i).url)+';';
urlsToExport += $.trim(rs.rows.item(i).keyword)+';';
urlsToExport += $.trim(rs.rows.item(i).position)+'n';
}
$('#urlExport').empty().append(urlsToExport);
}
function renderTodo(row) {
var rowRendered = ('<tr><td style="width:150px;"><a target="_blank" href="' + row.url + '">' +
shortUrl(row.url, 40, 8) + '</a></td>' +
'</td><td>' + row.keyword + '</td>' +
'</td><td>' + row.position + '</td>' +
'</td><td>' + date('j F Y, H:i:s',row.added_on/1000) + '</td>' +
'</td><td>[<a href="#" onClick="$.DB.delData(' +
row.ID + ');">Supprimer</a>]</td></tr>');
return rowRendered;
}//
function shortUrl(myurl, prefixe, sufixe) {
var reg = new RegExp("(^.{" + prefixe + "}).*(.{" + sufixe + "})$");
return (prefixe + sufixe + 3 < myurl.length) ? myurl.replace(reg, "$1...$2") : myurl;
}
});
</script>
</body>
</html>
ça parait presque trop facile tu ne trouves pas ? On s’est fait ici un joli tableau avec nos affichages ( tiens je vois au passage que j’ai regagné des position sur l’extension de démo … COOL ). On n’a pas fait grand chose ici, une page html, chargement de jQuery et de quelques plugins comme tablesorter pour pouvoir jouer avec le tableau des données. Et enfin, on a mis en forme les données extraites de la base de donnée.
Voilà génial, un peu de CSS et le tour est joué
options.css
body {
margin: 0; padding: 0;
font: normal 14px Verdana, Arial, Helvetica, sans-serif;
background:#fff url(../imgs/bg.jpg);
}
*{outline: none;}
img {border: 0;}
a{color:#637083;}
a:hover{color:#47666B;}
.container {
width: 90%;
padding: 0;
margin: 0 auto;
}
/*--------------------------------------------------------
TABLE (datas)
---------------------------------------------------------*/
/* tables */
table.tablesorter {
font-family:arial;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #EFEFEF), color-stop(1, #C9C5C5));
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
-webkit-border-radius:5px;
-webkit-box-shadow:0 0 3px #000;
text-align:center;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
border:none; /* 1px solid #000; */
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
/*background-image: url(bg.gif);*/
border-bottom:1px solid #979696;
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
}
table.tablesorter thead tr .headerSortUp {
}
table.tablesorter thead tr .headerSortDown {
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
}
table a{color:#637083;}
Popup.css
body{
width:360px;
font-family:arial;
}
.clear{
clear: both;
}
a{color:#94E90B;}
a:hover{color:#5D8C00;}
/*--------------------------------------------------------
FORM INITIAL
---------------------------------------------------------*/
/* form 2 */
#form{
margin:1em 0;
color:#fff;
width:320px; /* customize width, this form have fluid layout */
}
#form h3{
width:100%;
margin:0;
background:#191919;
color:#fff;
font-size:20px;
-webkit-box-shadow: inset 0 -1px 1px 1px #000;
border-bottom:none;
}
#form h3 span{
display:block;
padding:10px 20px;
margin-bottom: 0;
}
#form fieldset{
margin:0;
margin-top:-10px;
padding:10px 0;
border:none;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #333534), color-stop(1, #171717));
-webkit-box-shadow: inset 0 -1px 2px 2px #000;
padding-bottom:1em;
}
#form legend{display:none;}
#form p{margin:.5em 20px;}
#form label{display:block;}
#form input, #form textarea{
width:100%;
border:inset 2px solid #111;
background:#282828;
padding:5px 3px;
color:#fff;
-webkit-border-radius: 3px;
}
#form input[type=submit]{
font-size:16px;
color:gray;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #EFEFEF), color-stop(1, #C9C5C5));
}
#form input:hover, #form textarea:hover{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #EFEFEF), color-stop(1, #C9C5C5));
color:black;
}
#form textarea{
min-height:55px;
overflow:auto;
}
#form p.submit{
text-align:right;
}
#form button{
padding:0 20px;
height:32px;
line-height:32px;
border:1px solid #F1F1F1;
background:#5D8C00;
color:#fff;
cursor:pointer;
text-align:center;
-webkit-border-radius: 3px;
}
#form button:hover{color:black;}
Background.css & content_script.css peuvent rester vide pour cette application, nous ne nous en servont pas réellement. Un peu de html pour le background pour charger les librairies javascript surtout:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/libs/jquery.min.js"></script> <script src="js/libs/jquery.positionchecker.js" type="text/javascript"></script> <script src="js/helpers.js" type="text/javascript"></script> <script src="js/libs/webDB.js" type="text/javascript"></script> <script src="js/background.js" type="text/javascript"></script> </head> <body> <script src="js/ga_track.js" type="text/javascript"></script> </body> </html>
Vous remarquerez ga_track.js en bas, ce fichier n’est pas fait ici, mais vous pouvez très bien utiliser votre compte Google Analytics pour traquer les utilisations de votre applications, c’est pas mal, ça flatte l’égo d’avoir des extensions utilisées 200 fois/jour :) Je reviendrais sur ce point tard si vous êtes gentil dans les commentaires. Mais en attendant voilà …
Notre extension est terminée
C’est basique bien entendu et je ne pense pas avoir loupé grand chose … Je répondrais de toute façon aux commentaires et comme je suis bon joueur, je vais vous permettre de télécharger l’extension toute fait pour vous aider à programmer votre joujou perso. En revanche, vous allez m’échanger l’extension contre un Twitt ;) Cliquez sur le bouton ci-dessous !
(17950 lectures)