Comment augmenter la notoriété de votre blog grâce au navigateur chrome?

battery_health

Hier je me suis aperçu que vous ne veniez pas tous sur Mychromebook lorsque je diffusais un nouvel article, c’est pas très gentil ! Une fois la colère passée, j’ai subitement réalisé que vous aviez sûrement une vie en dehors de votre Chromebook et que vous n’attendiez pas sur la page web du site en faisant « Refresh » toutes les 5 minutes pour lire nos articles.

Alors j’ai décidé de me pencher sur ce problème et l’idée met venue de vous proposer une application Chrome que vous pourriez télécharger gratuitement et qui vous tiendrait informé en temps réel des news du site .

Qu’est ce qu’une application Chrome :

Les applications Chrome OS sont pour la grande majorité des liens ou des raccourcis vers des pages web, peu d’applications sont réellement installées sur votre Chromebook. C’est d’ailleurs ce qui fait la force et la vitesse des Chromebook, léger, fluide et réactif.

Les applications sont toutes regroupées dans le Google store, c’est une sorte de grande surface des applications. Pour ceux qui ne connaissent pas encore, cliquez sur le bouton ci-dessous afin d’accéder directement au store :

❯Google Store

De plus en plus fournis vous trouverez sûrement votre bonheur, mais il manque une application, la votre !

Créer votre application Chrome :

Ce que je vous propose aujourd’hui c’est de créer votre application Chrome en quelques minutes et sans connaissance particulière. La seule chose que vous aurez besoin c’est un éditeur de texte pour saisir ce que nous allons vous communiquer. Notre choix c’est porté sur Txt , télécharge- le avant de continuer.

Étape 1 : Mise en place

La toute première chose à faire est d’ouvrir l’explorateur de fichiers ( Files ) et de créer un nouveau dossier pour cela faites la commande suivante :

Ctrl + E

Puis renommé le dossier en faisant un clic droit dessus .

Créer un logo de 128 px par 128 px pour votre application, attention c’est assez petit donc prévoyez à ce qu’il soit assez lisible . Nommez le fichier :

icon.png et placez-le dans le dossier précédemment créé.

Étape 2 : Création du Code

Nous allons entrer dans le vif du sujet, lancer l’éditeur de Text, nous allons créer un fichier que nous nommerons en faisant « sauvegardez sous » :

manifest.json

Maintenant lançons-nous dans le code, nous allons dans ce fichier donner les différents descriptifs et normes de votre application, copier le code ci-dessous et modifier uniquement ce qui est en caractère gras :

{
« name »: « Nom de votre application« ,
« description »: « Descriptif de votre application« ,
« browser_action »: {
« default_icon »: {
« 38 »: « icon.png »
},
« default_title »: « Titre de votre blog« ,
« default_popup »: « popup.html »
},
« manifest_version »: 2,
« update_url »: « http://clients2.google.com/service/update2/crx »,
« content_security_policy »: « script-src ‘self’ https://www.google.com; object-src ‘self' »,
« version »: « 0.1 »
}

Pour le moment rien de compliqué! N’oubliez pas de sauvegarder.

Créons un nouveau Fichier que nous nommerons:

popup.html

Sur cette partie quelques connaissances HTML peuvent être le bienvenu, mais soyez serein je met en gras les choses à modifier

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
<link href='Feuillestyle.css' rel='stylesheet'>

<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Digital Inspiration</title>

<script src="https://www.google.com/jsapi"></script>
<script src="RSS.js"></script>

<base target="_blank">

</head>
<body bgcolor="#FFF">
<table class="body-wrap">
<tr>
<td class="container">
<div class="content">
<div id="pattern" class="pattern">
<form action="URL Du blog" method="post" class="f" target="_blank">
<input type="search" name="s" placeholder="Find something.." />
<input type="submit" class="btn search-submit" value="Chercher">
</form>
</div>
<div id="feed"></div>
<div id="logo">
<a href="URL DU BLOG"><img src="Lien de l'image du blog" /></a>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

Créons cette fois le fichier Javascript que nous nommerons  :

RSS.js

Il nous permettra d’afficher notre flus RSS dans une bulle du navigateur Chrome, encore une fois je met en gras ce que vous devez modifier.

google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("ADRESSE DE VOTRE FLUX RSS");
feed.setNumEntries(10);
var count = 1;
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
var html = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
html = "<h5>" + count++ + ". <a href='" + entry.link + "'>" + entry.title + "</a></h5>";
var div = document.createElement("div");
div.innerHTML = html;
container.appendChild(div);
}
document.write(html);
}
});
}
google.setOnLoadCallback(initialize);

Nous avons bientôt fini, maintenant nous allons créer notre feuille de style que nous nommerons :

Feuillestyle.css

Je vous en propose une que vous pouvez utiliser telle-quelle, mais vous pourrez la personnaliser :

*{font-family:"Open Sans", Arial, sans-serif;margin:0;padding:0}img{max-width:100%}.collapse{margin:0!important;padding:0}body{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;width:250px;height:100%}.f{position:relative}input{display:block;border:1px solid #000}input[type=search]{width:100%;position:relative;top:0;padding:.7em 4em .7em .7em}input[type=submit]{position:absolute;right:.75em;top:.5em;bottom:.5em;z-index:1;width:4em;cursor:pointer;background-color:#000;padding:0}#logo{width:200px;margin:2em auto 0}a{color:#2BA6CB}.btn{text-decoration:none;color:#FFF;background-color:#666;text-align:center;cursor:pointer;display:inline-block;padding:5px}p.callout{background-color:#000;margin-bottom:15px;color:#FFF;width:120px;text-transform:uppercase;padding:10px}.callout a{color:#FFF;text-decoration:none;font-size:80%}.header.container table td.label{padding:15px 15px 15px 0}table.footer-wrap{width:100%;clear:both!important}.footer-wrap .container td.content p{border-top:1px solid #d7d7d7;padding-top:15px;font-size:10px;font-weight:700}h1,h2,h3,h4,h5,h6{font-family:"Open Sans", sans-serif;line-height:1.1;margin-bottom:15px;color:#000}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-size:60%;color:#6f6f6f;line-height:0;text-transform:none}h1{font-weight:200;font-size:44px}h2{font-weight:200;font-size:37px}h3{font-weight:500;font-size:27px}h4{font-weight:500;font-size:23px}h5{font-weight:400;line-height:16px;font-size:12px}h5 a{text-decoration:none}form{margin:0 0 1em}p,ul{margin-bottom:10px;font-weight:400;font-size:12px;line-height:1.4;color:#777}p.lead{font-size:17px}p.last{margin-bottom:0}ul li{margin-left:5px;list-style-position:inside}.container{display:block!important;max-width:100%!important;clear:both!important;margin:0 auto!important}.content{max-width:100%;display:block;margin:0 auto;padding:10px}.column{width:300px;float:left}.column-wrap{max-width:600px!important;margin:0 auto;padding:0!important}.social .column{width:280px;min-width:279px;float:left}.clear{display:block;clear:both}table.head-wrap,table.body-wrap,.content table,.column table{width:100%}.header.container table td.logo,.column tr td{padding:15px}

Voila nous avons fait fini le codage,  c’était facile,  non? Vous avez donc dans le dossier 5 fichiers :

  • manifest.json
  • popup.html
  • icon.png
  • feuillestyle.css
  • Rss.js

Compresser et tester votre application :

Avant de mettre en ligne votre application nous allons la tester pour être sûr que vous obtenez ce que vous vouliez, pour ce faire rendez-vous dans les paramètres de Chrome puis cliquez sur extension.

Passez en Mode développeur

Screenshot 2014-05-25 at 11.23.10
  • Cliquez sur Empaqueter l’extension
  • puis ajouter votre dossier dans le Répertoire racine de l’extension 
Screenshot 2014-05-25 at 11.26.47

Maintenant vous vous retrouvez avec deux fichiers dans votre explorateur de fichiers ( Files  ) avec ces deux extensions :

  • Crx
  • Pem

Glissez l’extension en CRX sur la page des extensions chrome :

Screenshot 2014-05-25 at 11.29.51

Enfin dans le popup qui apparaît cliquer sur Ajouter, et c’est fait, l’icône de votre application sera désormais présente dans votre Omnibox, cliquez dessus pour voir le résultat

Mettre en ligne votre application :

Vous êtes satisfait du résultat ? Alors il ne vous reste plus qu’à le proposer sur Google Store, mais avant cela il nous faut compresser le dossier en Fichier zip

  • Rendez-vous sur « Files » puis faites un clic droit sur le dossier, enfin sélectionner, compresser le fichier au format zip
  • Rendez-vous ensuite sur le  Tableau de bord du développeur google
  • Importez votre dossier compressé et ajoutez une description, une icône, quelques captures d’écran.
  • Attendez quelques minutes avant publication.

Ce qu’il faut savoir :

Vous devez vous acquitter des frais de première inscription applicables aux développeurs qui s’élèvent à US$5.00 pour valider votre compte et publier des articles.

J’espère que grâce à cela vous aurez réussi à créer votre propre application, mais si vous avez rencontré des problèmes, que vous avez une question, laissez-nous un commentaire dans la suite de cet article .. ..

Shares:

5 Comments

  • duhamel
    duhamel
    26 mai 2014 at 13 h 22 min

    c’est ajouté en favoris, maintenant ça sera plus rapide pour voir tout tes articles merci ;)

    Reply
    • duhamel
      duhamel
      26 mai 2014 at 13 h 23 min

      je voulais bien sur dire ajouté en extension

      Reply
    • Nicolas
      26 mai 2014 at 15 h 08 min

      Pouvez vous laisser un commentaire sur google Store pour l’extension.. merci d’avance ..

      Reply
  • alex64
    alex64
    25 mai 2014 at 12 h 56 min

    Bonjour,
    Déjà, merci pour cet article, mais j’ai quelques questions :
    1) Est-on obliger de mettre un flux RSS ?
    2) L’application me demande une clé d’empaquetage, comment faire ?
    3) Comment utiliser un logo de plus de 128*128 pixels ?
    Merci d’avance

    Reply
    • Nicolas
      25 mai 2014 at 16 h 12 min

      Le tuto que je propose te permet de lire un flux rss mais si tu veux juste un lien vers ton site c’est encore plus simple , il te suffit de faire un dossier avec deux fichiers :

      Ton fichier Icon.png et le fichier manifest.json contenant
      {
      « manifest_version »: 2,
      « name »: « MyChromeBook.fr »,
      « description »: « Retrouver toute l’actualité, les astuces, les tutoriels, les tests et les applications sur Chromebook, Chromeboxe, Chromebase et chrome OS avec mychrombook.fr »,
      « version »: « 1.1 »,
      « icons »: {
      « 128 »: « logo128.png »
      },
      « app »: {
      « urls »: [
      « http://mychromebook.fr/ »
      ],
      « launch »: {
      « web_url »: « http://mychromebook.fr/ »
      }
      },
      « permissions »: [
      « unlimitedStorage »,
      « notifications »
      ]
      }

      La clé d’empaquetage n’est pas obligatoire, tu peux ne rien mettre cela fonctionnera également
      Pour le logo c’est obligatoire de faire 128 x 128 normalisé par Google ..

      As tu essayer l’application mychromebook ? https://chrome.google.com/webstore/detail/mychromebookfr/oinhanoahimkidoamapklocopnohfepc

      Reply

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.