Créer une extension Chrome pour votre site Web

C’est possible de créer une extension et une application chrome et l’envoyer dans le Chrome Web Store en moins de cinq minutes. Nous l’avons fait pour notre site web et vous pouvez aussi le faire pour le vôtre du moment où il tourne sur WordPress. Il peut aussi fonctionner pour d’autres CMS ou sites web mais la fonctionnalité de recherche ne va pas fonctionner dans l’extension Chrome.

L’application Chrome ajoute une icône dans la page Applications et nouvel onglet de Chrome qui vous redirige sur le site indiqué lorsque vous cliquez dessus. C’est un peu comme un signet. Ici quelque soit la technologie ou le CMS utilisé, il devrait fonctionner.

Installer l’application Chrome de Tech-Connect

L’extension Chrome offre un peu plus de fonctionnalités. Il ajoute une icône à la barre d’outils de Google Chrome et vous permet de recevoir les derniers articles récemment publiés sur le site web en question; dans notre cas celui de Tech-Connect.info. Vous pouvez aussi faire une recherche sur le site web directement depuis l’extension. La fonctionnalité de recherche a été codée pour WordPress mais si vous avez quelques notions de programmation en PHP et HTML, vous pourrez l’adapter à votre site web ou CMS.

Installer l’extension Chrome de Tech-Connect

Chrome est désormais le navigateur web le plus populaire et il est donc logique d’être présent dans sa boutique. Heureusement, comme vous le verrez dans la suite, vous n’avez pas besoin de compétences pointues pour créer une application pour chrome.

Créer votre propre application Chrome

Télécharger l’archive chrome-app.zip sur votre bureau, décompressez-la et ouvrez le fichier manifest.json dans Notepad++ ou tout autre éditeur de texte. Quelques modifications sont nécessaires dans le fichier.

Ajoutez le nom de votre site à la ligne N°2 (name) en remplaçant le nôtre: ‘Tech-Connect’. Modifiez la courte description du site en ligne N°3 ( il doit être inférieur à 132 caractères ), puis remplacer www.tech-connect.info dans les lignes #5 et #7 avec l’URL de votre site Web.

Assurez-vous d’être le propriétaire de ces sites web en utilisant les Outils Webmasters de Google.

{
    "name": "Le nom de votre site web",
    "description": "La description de votre site web en 132 caractères ou moins.",
    "app": {
        "urls": ["https://www.tech-connect.info/"],
        "launch": {
            "web_url": "https://www.tech-connect.info/"
        }
    },
    "manifest_version": 2,
    "update_url": "http://clients2.google.com/service/update2/crx",
    "version": "0.1",
    "icons": {
        "128": "icon.png"
    }
}

Ceci s’applique à l’application comme à l’extension, si vous devez mettre à jour votre application, vous devez incrémenter le numéro de version. (version: 0.1 -> version: 0.2)

Enregistrez le fichier manifest.json. Ensuite, créez une image de taille 128×128 pixels et en png avec le logo de votre site web et enregistrez le fichier sous icon.png dans le même dossier que le fichier manifest.json. Pour gagner du temps , vous pouvez utiliser l’échantillon de 128×128 px fourni avec l’archive zip.

Publiez votre application Web dans la boutique de Chrome

Maintenant nous allons envoyer notre application dans la boutique de Chrome. Après modification des fichiers, créez une archive zip du dossier chrome-app contenant le fichier manifest et l’icône.

Ensuite, allez dans le tableau de bord de chrome et envoyer votre fichier zip. Sur l’écran suivant, sélectionnez une catégorie pour votre application (Actualités > Blogs), ajoutez une description détaillée, quelques captures d’écran, choisir la langue par défaut et publier votre application.

Vous devrez payer 5$ en utilisant Google Wallet pour activer votre compte développeur et publier l’application dans la boutique. Ce paiement ne s’effectue qu’une fois. Toutefois, si vous voulez juste utiliser votre application en local, vous n’avez pas besoin de la publier sur le Chrome Web Store.

Créer une extension Chrome pour votre site web

Télécharger l’exemple chrome-extension.zip et décompressez son contenu. Modifiez le fichier de manifest.json en incluant le nom de votre extension (#2 name), la description (#3 description) et le titre de votre extension (#8 default_title).

Ensuite, ouvrez le fichier techconnect.js et incluez l’URL de votre flux RSS à la ligne #4. Modifiez aussi le fichier techconnect.html à la ligne #11 avec le nom de votre application. Ajoutez l’url de votre site à la ligne #27. Cette url est utilisé pour la recherche. La ligne #34 ajoute le logo de votre site web à l’extension avec un lien menant vers celui-ci et une image externe (https://www.tech-connect.info/logo-XS.png) de longueur maximale de 200px.

<a href="https://www.tech-connect.info/"><img src="https://www.tech-connect.info/logo-XS.png" /></a>

En plus de l’icône de 128×128 px (icon.png), vous devez aussi ajouter dans le dossier l’icône de l’extension a afficher dans la barre d’outils en .png de taille 32×32 px que allez nommer icont.png.

Archiver le dossier chrome-extension contenant les fichiers et transférez-le dans le tableau de bord de Chrome. Ajouter les méta-données appropriées et en quelques minutes, votre application et extension sera disponible publiquement dans la boutique Chrome.

Source: Labnol