Application de JavaScript: scripts utilisateur

La rédaction d'un script utilisateur est une façon amusante d'utiliser vos compétences JavaScript. Il vous fait sortir de l'éditeur dans le navigateur avec des commentaires et une validation en temps réel.

Qu'est-ce qu'un script utilisateur?

Userscripts (alias Scripts utilisateur, scripts utilisateur, ou .user.js) sont des add-ons sous licence open-source pour les navigateurs Web que les pages web de changement , car ils sont chargés. Ils donnent aux utilisateurs le pouvoir de faire en sorte que les sites Web fassent ce qu'ils veulent, plutôt que ce qui était initialement prévu.

Les scripts utilisateur sont écrits en JavaScript et vous permettent de modifier l'apparence d'une page Web sur votre navigateur. Les scripts n'affectent que votre navigateur, pas la page Web réelle.

Un avertissement rapide

Vous devez être conscient des problèmes de confidentialité lorsque vous utilisez des scripts utilisateur et ne devez pas les installer à partir de sources auxquelles vous ne faites pas confiance. Userscripts peut effectuer des actions en votre nom et peut potentiellement accéder à toute information sur un site Web auquel vous avez accès ou que vous entrez dans un site Web. Ils sont souvent autorisés à exécuter des fonctions que les scripts des sites Web normaux ne peuvent pas, telles que le stockage d'informations sur votre ordinateur et leur partage entre les sites Web. Des scripts d'utilisateurs mal écrits pourraient également être exploités par des sites Web malveillants.

explications tirées de //github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO

Pourquoi des scripts utilisateurs?

Free Code Camp a beaucoup de grands projets du monde réel qui enrichiront vos compétences et votre portefeuille. J'aime personnellement utiliser les compétences que j'ai acquises en JavaScript, jQuery et CSS pour modifier ma navigation quotidienne.

Certains scripts utilisateur ont été extrêmement populaires et ont été transformés en extensions de navigateur. Un exemple serait la Reddit Enhancement Suite disponible sur //redditenhancementsuite.com/.

Vous pouvez également utiliser votre script utilisateur comme base d'une extension de navigateur!

Commencer

Les scripts utilisateur sont exécutés à partir des extensions de navigateur elles-mêmes. Grease Monkey (FireFox) a été le complément pionnier pour permettre aux utilisateurs de personnaliser leur expérience de navigation. Installez le plug-in approprié pour votre navigateur.

Pour FireFox: Grease Monkey

Mécano

Le canal de développement vous permet de tester une version expérimentale de ce module avant qu'il ne soit distribué au général ... addons.mozilla.org

Pour Chrome: Tamper Monkey

Tampermonkey

Le gestionnaire de scripts utilisateur le plus populaire pour les navigateurs basés sur Blink chrome.google.com

Pour ce tutoriel, j'utiliserai Chrome avec Tamper Monkey.

Il ne devrait pas y avoir de différences significatives avec le processus après l'installation de Grease Monkey ou Tamper Monkey.

Au cas où, voici un lien rapide pour installer Grease Monkey (ainsi que pour faire quelques choses avec.)

Tutoriel Greasemonkey pour les débutants

Dans le didacticiel Greasemonkey, j'ai expliqué comment écrire des scripts utilisateur Greasemonkey. Après ce tutoriel, vous pourrez… hayageek.com

le projet

Nous allons apporter un léger changement à la page d'accueil sur Hacker News //news.ycombinator.com.

Nous utiliserons jQuery pour rendre les couleurs d'arrière-plan des liens alternés légèrement différentes afin d'améliorer la lisibilité.

démarrer un nouveau script

Cliquez sur l'icône Tamper Monkey en haut à droite et sélectionnez « Ajouter un nouveau script» dans la boîte de dialogue.

Vous devriez être redirigé vers un nouvel onglet qui ressemble à ceci

Remplissez les informations

Après avoir démarré un nouveau script, la première chose que nous voulons faire est de renseigner les informations de script en haut. Allez-y et remplissez les attributs suivants comme vous le souhaitez

  • Nom
  • la description
  • auteur

Je vais également vous montrer à quoi ressemble le mien.

Ajouter jQuery

juste avant la ligne

// ==/UserScript==

ajouter une ligne avec le texte de

// @require //code.jquery.com/jquery-latest.js

Considérez cela comme l'importation / la demande de jQuery pour un projet JS.

Voici le mien

Bonjour script.js!

Voyons si notre script se charge sur //news.ycombinator.com et si jQuery est prêt à fonctionner.

Après la ligne // your code here , ajoutez le code suivant

$(document).ready(function() { alert('WINNING');});

et entrez Ctrl + s ou cliquez sur le bouton Enregistrer à gauche

Vous pouvez être amené à la page suivante. Sinon, cliquez sur l'onglet Usercripts installés.

Impressionnant! Le script de sortie est chargé dans Tamper Monkey. Le point vert sur la gauche signifie que le script est activé. Vous pouvez même voir le logo Hacker News sur la capture d'écran.

exécuter le script

Visitez Hacker News dans votre navigateur et si vous avez suivi et que tout s'est bien passé, vous devriez voir

Lancez le débogueur

Il est temps de trouver les éléments de publication que nous voulons modifier. Entrez Ctrl + Maj + i pour afficher le débogueur du navigateur.

Nous voulons maintenant sélectionner un élément à regarder de plus près. Cliquer sur le carré bleu avec la souris en haut à gauche du débogueur ouvrira le sélecteur d'élément. Vous pouvez également utiliser le raccourci clavier Ctrl + Maj + c .

Comme vous pouvez le voir, j'ai trouvé un élément appelé td.title . Après avoir cliqué dessus, l'élément est mis en surbrillance dans l'onglet éléments du débogueur (également illustré ci-dessus).

Mettre en évidence l'élément au-dessus de notre titre appelé

sélectionne ceci dans le navigateur

Bingo. On dirait que nous avons trouvé l'élément que nous voulons. Hacker News a une mise en page HTML propre, il n'a donc pas été trop difficile de trouver notre élément cible.

Si vous vous souvenez de votre jQuery, tout ce que vous avez à faire pour trouver tous les éléments de l'article est d'utiliser le sélecteur

$('.athing')

faire quelque chose à notre élément de publication

Maintenant que nous avons un moyen de sélectionner notre élément avec jQuery, nous pouvons modifier notre élément. Changeons la couleur d'arrière-plan des articles en utilisant le code suivant. Remplacez le code $ (document) .ready () par ceci

$(document).ready(function() { $('.athing').css('background-color', '#DDD');});

Remarque: #DDD est un raccourci pour #DDDDDD;

regardons la page résultante. N'oubliez pas de sauvegarder votre usercript puis d'actualiser la page HackerNews. Vous devrez peut-être fermer votre débogueur pour afficher la page entière.

Avons-nous finit? Pas assez. Nous avons changé tous nos éléments de publication au lieu d'alterner. Cela peut ressembler à l'effet zèbre que nous voulions, mais c'est uniquement parce que l'élément score / subinfo n'est pas affecté. Si vous avez également envie de modifier cet élément, n'hésitez pas à publier votre méthode dans les commentaires. Cela sort du cadre de ce guide.

Oh non?! Que faisons-nous… Je ne veux pas écrire de boucles!

jQuery à la rescousse

N'ayez pas peur, chers campeurs. jQuery est encore venu à la rescousse.

jQuery fournit des sélecteurs spéciaux juste pour une occasion comme celle-ci.

Maintenant introduisant : impair

: sélecteur impair

Description: sélectionne des éléments impairs, indexés à zéro. Voir aussi même. En particulier, notez que l'indexation basée sur 0 signifie… api.jquery.com

tout ce que nous avons à faire est d'ajouter : impair à la fin de notre sélecteur pour que la ligne ressemble à ceci. Remarque: j'ai également changé la couleur en #EEE; pour mieux se fondre.

 $(‘.athing:odd’).css(‘background-color’, ‘#EEE’);

Enregistrez votre script et actualisez HackerNews et vous devriez voir ce produit final

Conclusion

Voilà. Maintenant, vous avez un autre débouché créatif pour libérer votre magie de codage en herbe! Les scripts utilisateur peuvent être utilisés pour peaufiner la fonctionnalité ou l'apparence d'un site, pour ajouter une fonctionnalité que vous avez toujours voulue, et bien plus encore.

Devoirs

Rédigez votre propre script utilisateur pour ajouter quelque chose à un site Web que vous utilisez souvent. Qu'il s'agisse du style ou d'un bouton permettant de basculer la visibilité de certains éléments, tout dépend de vous. Fournissez votre produit dans les commentaires ici!

Partez à la conquête des campeurs!

Plus de lecture

Tampermonkey

Tampermonkey est une extension de navigateur gratuite et le gestionnaire de scripts d'utilisateur le plus populaire pour les navigateurs basés sur Blink comme Chrome… tampermonkey.net GreaseSpot Wiki

GreaseSpot est une documentation communautaire pour les scripts utilisateur avec Greasemonkey. wiki.greasespot.net Greasy Fork - scripts utilisateur sûrs et utiles

Les scripts utilisateur vous permettent de contrôler votre expérience de navigation. Une fois installés, ils créent automatiquement les sites que vous… greasyfork.org Premiers pas: Créer une extension Chrome

Les extensions vous permettent d'ajouter des fonctionnalités à Chrome sans plonger profondément dans le code natif. Vous pouvez créer un nouveau… developer.chrome.com Comment développer une extension Firefox

Ce billet de blog est très obsolète. Si vous voulez un guide plus récent sur le développement d'extensions, veuillez lire le nouveau Comment… blog.mozilla.org