Bildr

Ceci est le guide de l'extension Chrome avec Bildr.

Au long de la lecture de ce guide, vous apprendrez comment créer une extension Chrome. Les éléments suivants sont abordés :

• Les bases d'une extension Chrome
• Exemples d'extensions Chrome
• Comprendre Bildr
• Créer une web app Bildr
• Exporter et tester l'extension Chrome
• Soumettre au Chrome Web Store
• Plus encore

Pour commencer, je vous suggère de créer votre compte Bildr et de suivre ce guide en testant de votre côté. Cela vous aidera à comprendre plus rapidement.

En résumé

Pourquoi créer une extension Chrome ?

• Pour vous, par exemple récolter des données des sites visités
• Pour aider votre équipe au travail
• Pour un projet entrepreneurial

Bildr est pour vous si :

• Vous n'avez pas peur d'essayer un nouvel outil qui demande une courbe d'ajustement
• Vous savez ou vous voulez apprendre comment créer une web app
• Vous voulez exporter facilement votre web app en extension Chrome
• Vous prenez le virage Web3

Initiez-vous au "No-code Ops" par la pratique et prenez la voie de la productivité

En une journée, découvrez par la pratique les fondamentaux des outils no-code, et maîtrisez la productivité via l'approche de Contournement : les fameuses "No-code Ops" qui rendront votre organisation plus efficiente.

Voir la formation

C'est quoi une extension Chrome ?

Une extension Chrome est une web app qui est installé dans le navigateur web Google Chrome.

À l'image de l'App Store sur votre téléphone mobile, il existe le Chrome Web Store où il est possible d'installer des extensions.

L'installation se fait toujours en un seul clic. C'est facile et vous restez toujours dans Google Chrome.

Certaines extensions peuvent modifier vos paramètres comme la page d'accueil, la page "Nouvel onglet", le moteur de recherche et la page d'accueil personnalisée.

Qu'est-ce que Bildr ?

Bildr est un outil no code pour créer une application web.

C'est un outil visuel de développement web comme Webflow et Bubble pour ne nommer que ceux-là.

La philosophie de Bildr est "sans opinion". Cela veut dire que votre projet dans le portail Studio est directement traduit en HTML, CSS et Javascript.

Il n'y a pas de librairies ou de codes supplémentaires.

En arrière-scène, tous les éléments, pages, actions, options, etc. dans le Studio sont représentés en JSON. Vous pouvez même faire les changements directement dans le fichier JSON.

Pour un outil no code, on est donc sans limite. Vous pouvez créer les actions et éléments que vous voulez.

Voici par exemple l'action qui détecte si le système de l'utilisateur est en mode dark ou light.

Les points positifs de Bildr

Voici ce que j'aime de Bildr.

Support

J'ai envie de commencer par quelque chose qui peut sembler superflu, c'est le support.

J'ai choisi Bildr pour créer mon extension Chrome, car c'était mon besoin précis. C'est le seul outil qui permet d'en créer une en quelques clics.

J'avais déjà mon idée d'extension, tout était clair. Surtout, l'extension est, actuellement tout de moins, très simple.

Pour le moment, l'exportation d'une web app en extension Chrome chez Bildr ne permet pas de choisir l'option "Nouvel onglet".

D'ici à ce que ce soit possible en un seul clic, un membre de l'équipe, Mark, m'a bien expliqué comment faire pour y arriver. Je devais changer le fichier manifest.json et déplacer un autre fichier (j'explique la procédure plus bas dans l'article). Rien de bien compliqué.

En quelques semaines, j'ai eu d'autres projets d'extension que je voulais réaliser avec Bildr.

En somme, j'ai demandé beaucoup de choses qui ne sont pas "nativement" encore possibles chez Bildr et pour la totalité, on m'a donné la procédure claire sur comment faire ou encore mieux, ils ont créés les actions afin que je les utilise sans coder.

Le Discord de Bildr est sans contredit la meilleure façon de profiter du support de l'équipe.

CSS

Vous êtes libre d'utiliser les classes comme vous le voulez et les modifier sans coder.

Et vous pouvez aussi, modifier le CSS rapidement avec les lignes de code.

Cela est rapide lorsque je veux m'inspirer d'un design que je vois sur un autre site.

Vous avez toujours accès à la totalité des classes en un seul endroit afin de les modifier à votre guise.

Workspaces et Pages

J'aime qu'on puisse segmenter le projet en plusieurs compartiments.

Pour ma part, j'ai placé tout ce qui est "Admin" dans un Workspace séparé.

En fonction du projet, cela peut éviter d'être envahi par une dizaine de pages dans le même Studio.

Versions

Par défaut, votre web app a le déploiement Development.

Lorsque vous configurez un nouveau lien URL pour votre page, vous aurez donc, par défaut, un lien URL avec un sous-domaine Bildr avec pleins de lettres et chiffres.

Cela vous permet, entres autres, de prévisualiser les modifications de votre web app en temps réel.

Au moment de lier votre domaine pour la version Production, vous pouvez aussi ajouter une version Test.

Cet procédure vous assure que lorsque vous publiez une nouvelle version de votre web app, il n'y aura pas de bug, car vous aurez testé le tout avant.

Au moment de publier, assurez-vous de suivre la procédure suivante :

1. Source : Developement / Destination : Test
2. Source : Test / Destination : Production

Les points négatifs de Bildr

Voici ce que je n'aime pas chez Bildr.

Responsive

Dans le Studio, il n'est pas possible de voir de quoi a l'air la web app en mode responsive (tablet et mobile).

Contrairement à Webflow et la plupart des sites builders, les outils imitent en temps réel la dimension des écrans plus petits.

Données

D'ici à la mise à jour de Bildr, il n'est pas possible d'ajouter les données directement dans l'outil.

Il faut donc créer une page Admin qui permet d'ajouter les données.

Cela peut demander beaucoup de temps au début, car il faut apprendre à bien maitriser les actions afin d'ajouter, modifier et supprimer les éléments.

Tutoriels

Contrairement à Webflow par exemple, Bildr manque de vidéos et tutoriels qui expliquent l'outil.

Il faut donc demander beaucoup de questions, alors heureusement que le support est bon.

Alors, cela fait en sorte qu'on est bloqué plus souvent, car on doit attendre les réponses.

Exemples d'extension Chrome

Il y a plusieurs types d'extensions possibles de créer avec Bildr :

• Web-app wrapper, comme Loom qui vous permet d'utiliser leur logiciel sans passer par leur site web ou l'application téléchargé sur votre ordinateur
• Context aware content delivery, comme SimilarWeb qui vous donne accès à des informations sur le site web consulté
• Scrapers & content aggregation, comme Notion Web Clipper qui enregistre un site directement dans Notion

Avec Bildr, Nocodedevs a lancé une extension Chrome qui permet de voir tous les tutoriels d'un site web visité.

Créer une web app Bildr

Ce n'est pas un tutoriel sur comment créer une web app, mais peut-être que je ferai une vidéo tuto bientôt. Laissez moi un commentaire en bas si vous voulez le savoir.

D'ici là, voici quelques éléments clés par écrit.

Collections

Les animaux au centre de l'écran proviennent de la collection Animaux comportant les champs Nom, Description, Espèce, Parrainage, Photo et Refuge.

La page Animal list que j'ai créé sert uniquement à faire le design de cette section et à aller chercher l'information dans la collection.

Admin

Maintenant, comment fait-on pour ajouter ces données?

C'est ce que je disais dans les éléments négatifs, on doit les ajouter à la main avec un admin fait maison. Ouf. Je n'en dirai pas plus sur comment le faire, car ce sera possible de les ajouter directement dans la collection à la prochaine mise à jour.

Pour les archives, voici de quoi à l'air mon Admin.

Le bouton Ajouter l'animal crée la valeur dans la collection avec l'action Data - Create record et montre l'élément sur la page avec l'action Element - Set value. Par exemple, voici le flow avec la photo de l'animal.

Éléments

Pour l'extension, j'ai utilisé deux éléments présents dans le Studio.

Pour le pop-up, j'ai utilisé l'élément Lightbox - Centered en suivant ce tutoriel.

J'ai aussi utilisé deux Lottie Animation à partir de Lottie Files en suivant ce tutoriel. C'est le bouton Live en avant du montant en haut à droite et les confettis lors du pop-up.

Actions

L'extension se met en Dark ou Light mode en fonction des paramètres du système de l'utilisateur grâce à l'action Check operating System Dark mode que j'ai inséré dans le flow Page Binding.

J'ai ensuite crée deux actions que j'ai nommé Set light themeet Set dark theme afin d'ajouter et supprimer des classes sur les éléments en question.

Par exemple, l'élément New tab page a deux Utility Style Classes possibles que j'ai créé : Light - Background et Dark - Background.

Alors, l'action Set dark theme va supprimer la classe Light - Background et ajouter la classe Dark - Background et vice-versa pour l'action Light dark theme. Et je fais ça pour tous les éléments qui doivent changer de couleur !

Exporter et tester l'extension Chrome

Bon, une fois la web app monté, il est temps de l'exporter et la tester.

Cliquez sur Page Propreties, ensuite sur Export Chrome Extension.

Maintenant, vous devez ajouter les informations pertinentes sur votre extension Chrome.

Basic Information

Pour le nom, il y a quelques règles à suivre.

La version de l'extension devra changer à chaque fois que vous publiez une nouvelle mise à jour de l'extension dans le Chrome Web Store.

La description sera placé dans la section Summary from package plus tard et vous pourrez en créer une plus longue à ce moment-là.

Les URLs doivent commencer par https et peuvent être les mêmes. Dans mon cas, j'ai une page d'accueil et une page distincte pour l'extension.

Enfin, l'icône devrait être carré et suivre ces indications.

Styling

Dans mon cas, comme c'est une extension type "Nouvel onglet", je dois absolument mettre Width: 100vw et Height: 100vh.

Cela veut dire que l'extension sera de la grosseur de l'écran de l'utilisateur.

Dans mon cas, le choix placement n'a pas d'importance.

Permissions

Pour l'instant, mon extension est un MVP (produit minimum viable) alors je n'ai pas besoin de permission.

Dans la prochaine version, je devrai ajouter des permissions, car je vais permettre aux utilisateurs de créer un compte, alors il y aura des données différentes pour chaque utilisateur.

Je vous invite à lire toutes les permissions possibles.

Exporter

Bon, il est temps de cliquer sur Export Chrome Extension + afin de télécharger le ficher .zip de l'extension.

(Facultatif) Extension de type "Nouvel onglet"

Si vous voulez créer aussi une extension de type "Nouvel onglet" et que l'option n'est pas encore possible dans Bildr, voici ce que vous devez faire (ce que j'ai fait).

1. Modifier le fichier "manifest.json"
2. Déplacer le fichier "bildrPopUp.html"

Le manifeste est le fichier qui indique à Chrome comment fonctionne l'extension. Vous devez ajouter un paramètre au fichier pour que Chrome sache qu'il doit ouvrir votre page Bildr chaque fois que l'utilisateur ouvre un nouvel onglet.

Pour ce faire, ajoutez le JSON suivant dans le fichier : , "chrome_url_overrides" : { "newtab" : "bildrPopUp.html" }

Une fois que vous avez exporté votre extension depuis Bildr, suivez ces étapes :

1. double-cliquez sur le fichier .zip pour extraire le contenu dans un nouveau dossier
2. double-cliquez sur le fichier "manifest.json" pour l'ouvrir dans un éditeur de texte
3. copier et coller le JSON ci-dessus dans le fichier entre les deux derniers caractères }

L'emplacement du fichier HTML dans les dossiers exportés doit être modifié. Pour ce faire, il suffit de glisser-déposer (drag & drop) le fichier dans le dossier principal.

Tester en mode développeur

Pour tester l'extension Chrome en mode développeur, vous devez :

• vous rendre sur votre page d'extensions en tappant l'URL chrome://extensions/
• cliquer sur Mode développeur, en haut à droite, pour le mettre en marche
• double-cliquer sur le fichier .zip téléchargé plus tôt pour extraire le contenu dans un nouveau dossier
• cliquer sur Charger l'extension non empaquetée afin d'installer le dernier fichier de l'étape précédente

Pour toutes modifications de votre extension dans le Studio de Bildr, vous devez :

• publier le projet au déploiement qui correspond à l'extension (dev, test ou prod)
• supprimer et remettre à nouveau le fichier "dézippé" ou cliquer sur Reload sur la carte de l'extension

Soumettre au Chrome Web Store

Super, il est maintenant temps de publier l'extension sur le Chrome Web Store.

Il faut d'abord payer les frais d'enregistrement de $5 pour créer un compte de développeur.

Une fois sur votre compte, cliquez sur + New item afin de téléverser le fichier zip de votre extension Chrome.

Store listing

Vous vous rappelez de la description dans la section Basic information dans Bildr (voir plus haut) ? Et bien, c'est ici dans Summary from package.

Dans la section Store listing, vous devrez ajouter ces éléments :

• description
• catégorie
• langue
• icone
• images
• URLs
• et autres...

Soyez le plus précis possible.

Privacy practices

J'ai rempli la section Privacy practices en anglais, car elle ne sera pas visible pour le public.

Dans la plupart des extensions, vous devrez probablement choisir Yes, I am using remote code et inscrire My extension is a wrapper around my web app.

Cela s'explique par le fait que Bildr peut insérer des références à des fichiers externes et qu'il y ait du Javascript dans la page.

Pour les données, dans mon cas, j'ai coché Personally identifiable information et Authentication information comme je prévois créer un membership à mon extension.

Payments and distribution

Voici ce que j'ai rempli pour mon extension dans la section Payments and distribution.

Enfin, vous cliquez sur Submit for review en haut à droite.

J'ai attendu un à deux jours avant d'avoir une réponse positive.

Pour les modifications, comme pour l'extension en mode développeur, il n'est pas nécessaire de refaire ces étapes. Vous n'avez qu'à publier dans Bildr et le tour est joué.

Vous aimez cet article ? Partagez-le à un•e ami•e. Ça ne prend que 10 secondes. L'écrire me prend 10 heures. Vous pouvez aussi m'offrir un (ou plusieurs) Latte glacé 🥤, ça m'aide à écrire plus !