Créez une application Chrome en 10 minutes pour votre site

 Créer son site

Ayant vu passer plusieurs offres pour la création de votre application Chrome (gratuites avec pub ou alors très chères), voici un petit tutoriel pour le faire gratuitement*, sans publicité et en moins de dix minutes pour chacun de vos sites. En bonus: en fin d’article un petit code PHP à mettre dans le fichier header.php de votre thème sous WordPress pour afficher le lien de l’extension en bannière de votre site pour les utilisateurs de Chrome uniquement.

*Gratuitement: La publication d’application est gratuite (chaque nouvelle application ne vous coûtera rien), cependant vous devrez payer 5$ pour valider votre compte développeur auprès des services Google avant de publier votre toute première application.

Créer son application Chrome en 4 clics

Ce dont vous aurez besoin:

- Un éditeur de texte

- Un serveur/Site vous appartenant (pour y héberger l’application)

- Un compte Gmail/Google Apps

- Chrome installé sur votre ordinateur

- 10 minutes de temps libre

Attention: Pour l’application Chrome, il vous sera demandé de valider votre possession du domaine sur lequel sera hébergée l’application (validation habituelle par code ou par accès Analytics)

Le code de votre application

Aucune connaissance en programmation n’est nécessaire pour créer votre application Chrome. Remplissez simplement les informations suivantes et sauvegardez le fichier sous le nom manifest.json. Seuls les textes en majuscule sont à modifier.

{
  "name": "NOM DE VOTRE APPLICATION",
  "manifest_version": 2,
  "description": "DESCRIPTION DE VOTRE APPLICATION",
  "version": "1.0",
  "app": {
    "urls": [
      "http://VOTRESITE.FR/apps/chrome/"
    ],
    "launch": {
      "web_url": "HTTP://VOTRESITE.FR/PAGE_UTILISATEURS_CHROME.PHP"
    }
  },
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [
    "unlimitedStorage"
  ]
}

Petites précisions:

  • http://VOTRESITE.FR/apps/chrome/: Adresse du dossier dans lequel sera hébergée votre application
  • HTTP://VOTRESITE.FR/PAGE_UTILISATEURS_CHROME.PHP : Page sur laquelle arriveront les utilisateurs de votre application. Vous pouvez les envoyer sur la page d’accueil ou sur une page dédiée. La page dédiée sera très utile pour mettre en cookie que ces utilisateurs utilisent déjà votre application et qu’il est donc inutile de leur proposer de la télécharger.

Vous avez ici fini de coder votre application !

Les fichiers à héberger sur votre site pour votre application Chrome

Passons donc à l’hébergement des fichiers dans le dossier /apps/chrome/

Fichiers à mettre dans ce dossier:

  • 1 logo de votre application au format png de 128 px sur 128 pxque vous appellerez icon_128.png
  • Votre fichier manifest.json fraîchement édité

Mettez le tout en ligne et votre application sera fonctionnelle.

Finir l’application avec le mode développeur de Chrome

Vous avez enfin fini toute votre application, vous allez donc pouvoir la tester sur votre navigateur Chrome et si tout fonctionne la publier en ligne.

Passer en mode développeur sur chrome

Allez dans le gestionnaire d’extensions:

Activez ensuite le mode développeur puis cliquez sur « Charger l’extention non empactée … »

Choisissez alors le dossier dans lequel se trouvent vos fichiers manifest.json et icon_128.png puis validez.

Si tout se passe bien votre nouvelle application doit être maintenant présente dans les extensions installées sur votre Chrome.

Facultatif: Obtenir ses fichiers *.pem et *.crx

Vous pouvez alors empaqueter pour enfin obtenir les fameux fichier .pem et .crx (des clés pour identifier que vous êtes bien le possesseur de l’application).

Cliquez donc sur « Empaqueter l’extension … » choisissez le même dossier qu’à l’étape précédente et validez.

Vous devriez avoir un message de ce type:

 

Publiez votre application sur le Chrome Web Store

Créez un petit fichier Zip contenant les fichiers manifest.json et icon_128.png.

Rendez-vous sur le dashboard des developpeurs Chrome (validez votre compte en payant 5$ si ce n’est pas encore fait)

Cliquez ensuite sur « Ajouter un nouvel article », puis téléchargez votre fichier zip contenant l’application.

Complétez tous les champs nécessaires pour la publication de votre application sur le Chrome Web Store puis cliquez sur publier.

Vous obtiendrez alors le lien de téléchargement de votre application Chrome que vous pourrez afficher fièrement sur votre site !

Ce tutoriel est terminé ! Normalement tout devrait bien se passer et vous devriez arriver à obtenir votre application en 10 minutes à peine pour chaque site pour lequel vous voudrez en développer.

FIN DE VOTRE APPLICATION

Pour les codeurs: La suite est un petit code PHP pour proposer aux utilisateurs Chrome de télécharger votre application.

Code – Proposer le téléchargement de votre nouvelle application aux utilisateurs Chrome.

Pour ce code vous devrez juste remplir l’adresse du lien de téléchargement de votre application en tout début de code. Vous pourrez ensuite ajouter ce code dans le header de votre site (ou le footer, cela ne changera rien) ou dans n’importe quelle page PHP.

Petit bout de code:

<?php
/*********************************************
 *          Configurez ici l'URL de 
 *          la nouvelle extention
 *          sur le chrome store
 *********************************************/
$url_extention="https://...";

/************** FIN DE LA CONFIG **************/
$nom_cookie="annonce_top";
$navigateur= $_SERVER['HTTP_USER_AGENT'];
if ($_COOKIE[$nom_cookie]!="Masquer_Chrome"){
    echo '"'.$_COOKIE[$nom_cookie].'"';
    if (preg_match("/Chrome/", $navigateur)){
        $value ="Afficher_Chrome";
        setcookie($nom_cookie, $value, $expiration, "/");
    ?>
<style>
    #BandeauAnnonce{
        position:fixed;
        top:0px;
        z-index: 400;
        background:#FFF;
        left:30%;
        border: 1px solid #DDD;
        border-top:none;
        padding:5px;
        padding-right:30px;
    }
    #BandeauAnnonce .text_bandeau {
        float:left; 
        padding:10px;
        margin-left:10px;
    }
    #BandeauAnnonce a.lien_bandeau_annonce{
        position: absolute;
        top: 0px;
        right: 0px;
        text-decoration: none;
        color: #888;
        cursor: pointer;
        background: #EEE;
        border:1px solid #ddd;
        border-right:none;
        padding: 1px 5px;
    }
    #BandeauAnnonce a.lien_bandeau_annonce:hover{
        color: #333;
    }
</style>
<script>
function CacherAnnonce(){
    document.cookie = 'annonce_top=Masquer_Chrome; path=/';
    document.getElementById("BandeauAnnonce").style.visibility='hidden';

}
</script>
    <div id="BandeauAnnonce"><div class="text_bandeau" >Téléchargez notre extention Chrome : </div><a href="<?php echo $url_extention; ?>"><span style="padding:10px;float:left;">Cliquez ici </span><img alt="Chrome" src="http://www.google.com/intl/fr/chrome/assets/common/images/chrome_logo_2x.png" style="width: 100px;-webkit-mask: -webkit-gradient(radial, 17 17, 123, 17 17, 138, from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));"></a><a onClick="CacherAnnonce()" title="Ne plus afficher ce message" class="lien_bandeau_annonce">X</a></div>
    <?php
    }else{
        //Un utilisateur sous un autre navigateur
    }
}else{
    //L'utilisateur ne veut pas voir ce message
}

?>


Auteur: 

Aucune réponse

Laisser un commentaire

CommentLuv badge

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.