Créer des booklets - La bonne façon

Les Bookmarkets peuvent être définis comme des mini-applications se faisant passer pour de minuscules extraits de JavaScript génial qui résident dans votre navigateur et fournissent des fonctionnalités supplémentaires à une page Web..

Aujourd’hui, nous allons étudier la création de bookmarklets à partir de zéro et, en cours de route, quelques bonnes pratiques à suivre..

Ils ne sont pas pour le ringard, en fait, ils sont plutôt centrés sur l'utilisateur.

Nous cherchons toujours des moyens d'améliorer notre expérience de navigation, qu'elle soit répandue ou peu connue. J'avais l'habitude de penser que les booklets appartenaient à ce dernier - le bastion des super-nerds. À mon grand chagrin, j'ai découvert que j'avais complètement tort sur le sujet. En fait, ils ne sont pas centrés sur l'utilisateur, ils implémentent de nombreuses fonctionnalités plutôt soignées et, comme prévu, c'est devenu une partie essentielle de la façon dont j'interagis avec le navigateur - et le l'Internet.

Aujourd'hui, j'aimerais vous guider dans le développement de bookmarklets mettant en œuvre certains bookmarks astucieux. Oui, signets. Nous en construirons plus d'un, bien que minuscules. Intrigué? Commençons!

Alors quoi exactement sont les bookmarklets?

Pour citer mon article intro:

Les Bookmarkets peuvent être définis en tant que mini applications se faisant passer pour de minuscules extraits de JavaScript génial qui résident dans votre navigateur et fournissent des fonctionnalités supplémentaires en un clic..

Le mot lui-même est un mélange, valise pour le pédant, des mots signet et applet. Également appelés favelets, ces minuscules extraits de JavaScript vous permettent de créer des fonctionnalités supplémentaires pour toutes les pages que vous visitez..

Parce qu'ils sont composés uniquement de JavaScript, ils sont plutôt portables: ils sont pris en charge par tous les navigateurs sur toutes les plateformes, même sur les mobiles et les tablettes. Les installer est aussi simple que de les faire glisser dans leur barre d’outils!

Oui, mais à quoi ça sert?

Le fait est que les bookmarklets vous permettent de réaliser un grand nombre de tâches trop centrées sur les développeurs. Chaque fonctionnalité que vous obtenez avec un bookmarklet peut être dupliquée en utilisant la console du navigateur et un peu de temps. Les bookmarklets simplifient simplement le processus - empaqueter le code qui implémente certaines fonctionnalités à l'intérieur d'un petit bouton bien ordonné.

Les bookmarklets peuvent être classés dans plusieurs catégories:

Ceux qui transmettent des données. Les bookmarklets qui soumettent une page à un service entrent dans cette catégorie. Les bookmarklets traitant des médias sociaux, des recherches dans les dictionnaires et des recherches entrent tous dans cette catégorie. Nous allons en construire un qui soumet à Reddit.
Ceux qui obtiennent des informations et / ou modifient la page en cours. Nous allons construire un bookmarklet qui définit la couleur d'arrière-plan d'une page.
Ceux qui travaillent dans les coulisses. Un bookmarklet qui efface tous les cookies du site actuel en est un excellent exemple et nous le construirons..

# 1 - Commencer

Le premier point que vous devez retenir est de préfixer tout le code JavaScript avec le javascript URI. Les navigateurs ont implémenté ce préfixe spécifique afin que le contenu suivi par celui-ci puisse être traité et analysé comme un code JavaScript approprié.

Par exemple, cliquer sur ce lien - voir son code ci-dessous - alertera un texte.

 Linky

# 2 - Utiliser une fonction anonyme comme wrapper

N'oubliez pas que votre code sera exécuté sur la page actuellement chargée - une page qui aura probablement son propre code JavaScript et toutes les collisions qui en résultent qu'elle implique. La dernière chose dont vous avez besoin est que votre bookmarklet coupe la page en cours..

En enveloppant parfaitement votre code dans une fonction anonyme, vous vous assurez qu'il n'y a aucune collision de nommage. De plus, les noeuds JavaScript seront sidérés et penseront que vous êtes un dieu, si vous aimez ce genre de chose..

javascript: (function () // votre code ici) ();

Ceci est pertinent lorsque vous utilisez JavaScript ailleurs. Toujours, toujours isolez votre code.

# 3 - Externaliser, si nécessaire

Un bookmarklet ne doit pas nécessairement être minuscule, vous êtes libre d'aller aussi gros que vous le souhaitez. Dans ces cas, dans l'intérêt de la distribution et de la mise à jour de votre code sans intervention manuelle de l'utilisateur, il est préférable de créer un wrapper capable d'extraire le code si nécessaire..

 javascript: (function () var jsCode = document.createElement ('script'); jsCode.setAttribute ('src', 'http: //path/to/external/file.js'); document.body.appendChild ( jsCode); ());

C’est à peu près ce que le code ci-dessus fait: il crée un élément de script, définit le fichier source sur un fichier hébergé ailleurs et l’ajoute au document. Ainsi, chaque fois qu'une partie de votre code change, vous pouvez déployer vos modifications sur une source unique et la propager instantanément à chaque utilisateur..

Remarque: Vous n'êtes pas limité à faire cela pour JavaScript uniquement. Si votre bookmarklet utilise un frontal, vous êtes également libre d'extraire le code HTML et CSS en externe, ce qui rend votre bookmarklet véritablement auto-actualisé..

# 4 - Mise en garde lors de l'ajout d'une bibliothèque

Encore une fois, si vous construisez le géant d'un bookmarklet, vous aurez peut-être besoin de l'une de ces bibliothèques JavaScript. Mais les utiliser dans votre page n’est pas aussi simple que de l’inclure, vous devez vous assurer que les bibliothèques ne sont pas déjà disponibles. Des bibliothèques telles que jQuery et MooTools dominent le marché et vous feriez bien de vous assurer qu'elles ne sont pas déjà chargées..

Un autre problème est que la page peut avoir chargé une autre bibliothèque, ce qui peut entraîner des conflits sur le contrôle du symbole $. Les collisions de versions peuvent également entrer en jeu à un moment donné, alors gardez cela à l'esprit également..

Voici un shell rapide pour le code que j'utilise généralement. N'oubliez pas que, dans votre code de production, vous devrez prendre en compte les problèmes mentionnés ci-dessus..

 if (! ($ = window.jQuery)) // typeof jQuery == 'undefined' fonctionne aussi script = document.createElement ('script'); script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; script.onload = releasetheKraken; document.body.appendChild (script);  else releasetheKraken ();  function releasetheKraken () // Le Kraken a été publié, maître! // Oui, je suis enfantin. Placez votre code ici

Le code devrait être assez explicite. Parcourons-le vite quand même.

Tout d'abord, nous déterminons si jQuery est chargé en vérifiant si l'objet jQuery existe dans l'espace de noms..
Sinon, nous le préparons rapidement pour l'inclusion. Nous suivons les meilleures pratiques et le chargeons à partir d'un CDN. Enfin, assurez-vous de pointer sur la fonction principale contenant le code à exécuter.
S'il est déjà inclus, lancez simplement la fonction wrapper principale.

Si vous cherchez à éviter tout ce problème, je recommande fortement l'excellent générateur de bookmarklets de Ben Alman. Il traite les conflits d'espaces de noms et de versions de manière très propre. Bon produit!

# 5 - Ne bousillez pas la page parent, sauf si vous devez

Les bookmarklets sont inutiles si, involontairement, ils cassent une page.

Je ne saurais trop insister sur ce point. Les bookmarklets sont inutiles s'ils, involontairement, cassent une page. Et le souci de JavaScript n'est pas la seule chose à laquelle vous devez faire face.

Si vous avez un front-end, le HTML et le CSS entrent également en jeu. N'attribuez pas à vos conteneurs et à vos classes des noms génériques - si vous le nommez 'conteneur', vous aurez toujours ma haine éternelle.

Un moyen facile est de préfixer [ou de suffixe, cela ne me dérange pas] de tout avec une chaîne spécifique à un bookmarklet. Et lorsque vous écrivez votre code CSS, soyez très, très spécifique. Utiliser la mise en cascade est agréable, mais utilisez-le avec une précision extrême. Avoir des styles qui fuient sur la page principale est irrégulier et ne suscite aucune confiance.

# 6 - Test, test, test

Si vous créez un bookmarklet plus petit, où l'inclusion d'une bibliothèque tierce semble inutile, vous rencontrerez un démon toujours présent: la compatibilité entre navigateurs..

Cela peut sembler assez évident, mais c’est quelque chose que beaucoup de gens oublient, souvent. Assurez-vous de tester autant de navigateurs sur autant de plateformes que possible.

Un autre piège facile à utiliser est un bookmarklet destiné à fonctionner sur tous les sites uniquement de manière sélective. Les pages peuvent avoir différentes hiérarchies et utiliser différentes méthodologies. Certains sites peuvent adopter HTML5 et utiliser les conteneurs associés, tandis que d'autres peuvent le jouer en toute sécurité et utiliser des divs génériques. Lorsque vous cherchez des informations, assurez-vous de prendre en compte chaque école de développement..

Et c'est parti

Maintenant que nous avons pris en compte certains points à garder à l’esprit lors du développement, nous allons construire les trois bookmarklets dont j'ai parlé précédemment - un appartenant à chaque catégorie..

Un bookmarket qui soumet à Reddit
Un bookmarket qui efface les cookies du site actuel
Un bookmarklet qui change la couleur de fond d'une page

Si vous êtes déjà familiarisé avec JavaScript de base, le code suivant devrait être un jeu d'enfant - ce ne sont que quelques lignes de code! Les bookmarklets ci-dessous sont avec moi depuis quelque temps déjà et je n'arrive pas à savoir où je les ai vus à l'origine. Si vous le faites, laissez-moi une note rapide dans les commentaires et je vais ajouter des crédits en conséquence.

Bookmarklet # 1 - Soumettre à Reddit

Nous commencerons par un très facile: soumettre à un service externe, Reddit dans notre cas..

 javascript: location.href = 'http: //www.reddit.com/submit? url =' + encodeURIComponent (location.href) + '& title =' + encodeURIComponent (document.title)

Ceci est quelque chose d'assez simple, pris directement sur le site. Pas d'encapsuleur anonyme ni d'espace de nom car la fonctionnalité est assez limitée.

Lorsque le bookmarklet est appelé, les opérations suivantes ont lieu, dans un ordre logique:

Le titre et l'URL de la page sont capturés à l'aide de location.href et titre du document
Pour vous assurer qu’aucun caractère illégal n’est introduit, nous le codons en utilisant le encodeURIComponent méthode
Enfin, nous concaténons tout pour obtenir notre URL et modifions l'emplacement de la page par celle-ci.

Ce modèle fonctionne assez bien pour la plupart des recherches et des soumissions. La seule variable ici serait l'URL à laquelle vous soumettez - chaque application adopte une approche différente. Moins d'une minute de recherche devrait vous voir à travers.

Par exemple, un bookmarklet de validation ressemblerait à ceci:

 javascript: location.href = 'http: //validator.w3.org/check? uri =' + encodeURIComponent (location.href)

Notez que nous avons simplement supprimé le titre de la page et modifié la structure de l'URL pour qu'elle pointe vers le service de validation W3..

Bookmarklet # 2 - Changer le fond d'une page

 javascript: void (document.bgColor = prompt ("Couleur? Hex ou nom suffira. Puis-je suggérer le rose? ',' rose '))

C'est aussi simple qu'il y paraît. Pour garder les choses super simples, j'ai choisi de ne pas introduire de variables et de validation. Nous allons simplement regarder le code de base.

Le premier debout, nous créons une invite qui demande à l'utilisateur une couleur pour définir l'arrière-plan. Puisque nous ne vérifions pas l'entrée, je compte sur toi pour ne pas être méchant..
finalement, nous mettons le fond à la couleur choisie par document.bgColor. C'est tout!

Ouais je sais bgColor est obsolète et oui, je sais que je devrais me sentir sale, mais cela suffira, car un test rapide sur les navigateurs modernes est positif.

Vous pouvez jouer avec ceux-ci un peu. Cela ressemble à la manière dont vous appliquez généralement le style CSS aux éléments via JavaScript. Nous ne faisons que l'appliquer à des pages arbitraires. Notez que les différentes pages ont des structures différentes. Par conséquent, si la page contient un conteneur d'habillage complet, l'effet risque de perdre tout son sens. Dans ces cas, vous devrez peut-être rechercher le conteneur principal, puis lui attribuer le style..

Bookmarklet # 3 - Effacement des cookies

 javascript: function () var c = document.cookie.split (";"); pour (var i = 0; i-1? C [i] .sstrstr (0, e): c [i]; document.cookie = n + "=; expire = jeu, 01 janvier 1970 00:00:00 GMT";  ()

Pas vraiment aussi compliqué qu'il n'y paraît - les cookies ont simplement une syntaxe très stricte donc nous devrons l'analyser étape par étape. Passons en revue le code:

Fractionner document.cookie sur la base de points-virgules. c devient maintenant un tableau contenant tous les cookies définis pour le domaine actuel.
Boucle à travers le tableau.
Vérifiez si le cookie contient le symbole égal à, c'est-à-dire si une valeur de cookie a été définie et renvoyée
Si oui, nous allons capturer toutes les informations jusque-là. Sinon, laissez le cookie tel quel.
Enfin, ajoutez une valeur de chaîne qui vide la valeur du cookie tout en définissant une date d'expiration du passé et en l'effaçant efficacement.

N'oubliez pas que les bookmarklets fonctionnent toujours sous la page afin que vous ne puissiez pas accéder aux cookies d'autres domaines. Vous êtes limité à la page sur laquelle vous appelez le bookmarklet..

C'est un wrap

Et nous avons fini. Rappelez-vous, nous avons simplement gratté la surface des bookmarklets. Beaucoup d'entre elles sont des applications complètes en elles-mêmes, avec un front-end adéquat pour démarrer. Celles-ci prennent beaucoup de temps et de planification, à l'image de toute application non triviale. Il s’agissait simplement de mettre les pieds dans le développement du bookmarklet. J'espère que vous avez trouvé ce tutoriel intéressant et que cela vous a été utile..

Des questions? De belles choses à dire? Des reproches? Hit la section des commentaires et laissez-moi un commentaire. Merci beaucoup pour la lecture!

Code