Je fais beaucoup de projets liés à Twitch ici et là, en essayant de voir quelles sont les possibilités. L’un de mes derniers projets consistait à créer une extension d’émote Twitch pour Chrome où je montrais comment obtenir des » créneaux » d’émote supplémentaires gratuitement. Cela m’a amené à m’intéresser aux extensions de navigateur, alors je me suis dit que nous allions montrer comment en faire une à partir de zéro en construisant un filtre de blasphème pour le chat de Twitch.
À la fin de ceci, nous voulons avoir une extension qui, lorsqu’elle est installée, vérifie un ensemble de mots marqués dans le chat et les remplace par des versions plus amicales. Cela pourrait être utile pour les enfants qui regardent des streams, par exemple.
Si vous voulez juste le code de cette extension, il y a un lien vers le résultat final au bas de cet article.
D’accord, alors entrons dans le vif du sujet. Créez un dossier quelque part que vous aimez et appelez-le profanity-filter. J’ai créé le mien dans un endroit où je me synchronise avec GitHub.
Maintenant, à l’intérieur de ce dossier, créez deux nouveaux fichiers : manifest.json et content.js. Vous verrez comment nous les utiliserons au fur et à mesure que nous construirons l’extension.
Ouvrez manifest.json, qui est le fichier que Google regarde pour les métadonnées concernant votre extension, et collez-y ce qui suit :
{ "manifest_version": 2, "name": "Twitch Profanity Filter Extension", "version": "0.1", "content_scripts": , "js": } ]}
Comme vous pouvez le voir, nous disons à Google que cette extension doit fonctionner sur n’importe quelle page de Twitch et nous disons également que la logique qui doit être exécutée sur ces pages réside dans le fichier appelé content.js. Notez que j’ai mis la version comme 0.1, car c’est mon essai initial.
Mettre la logique dedans
Maintenant, ouvrez content.js dans l’éditeur de texte de votre choix. Je recommande vivement Visual Studio Code, c’est mon éditeur de texte de prédilection pour tout ce qui concerne le codage et il est gratuit.
Maintenant, la façon dont nous allons mettre en place ceci est en quelques étapes. Que voulons-nous réaliser et comment allons-nous l’accomplir ? Nous savons que nous voulons changer certains mots par d’autres, ce qui signifie lire les messages de chat, les analyser pour trouver des mots signalés et ensuite mettre à jour ces mots par des mots plus amicaux. Donc, lorsque la page se charge, nous voulons que notre logique soit capable de faire ce qui suit :
- Trouver la boîte de discussion
- A chaque fois qu’un nouveau message de discussion apparaît, obtenir le message ou le conteneur de message
- Changer les mots marqués par leurs homologues amicaux
Alors, allons-y. La première partie consiste à activer réellement le script lorsque la page, ou plus précisément la fenêtre, a été chargée. En javascript, vous pouvez vous accrocher à cet événement de chargement et c’est ce que nous allons faire. Mettez à jour votre content.js pour qu’il contienne ce qui suit :
Ceci fera en sorte que tout ce que nous mettrons dans cette fonction, sera appelé lorsque la page sera chargée.
Trouver la chatbox
Comment trouver la chatbox ? Eh bien, dans la version Chrome du site web de Twitch, la chatbox est contenue dans un élément <div> qui a une classe appelée chat-scrollable-area__message-container. Nous allons obtenir cet élément, ou nœud, par le biais de javascript. Mettez à jour le fichier pour qu’il ressemble à ceci:
La raison pour laquelle nous ajoutons .item(0) derrière, est que getElementsByClassName() retourne un tableau d’éléments. Puisque nous savons qu’un seul élément a cette classe, nous le prenons dans le tableau en spécifiant que nous voulons la première chose (la plupart des langages de programmation commencent à compter à 0).
Get every new message in chat
Ceci est un peu plus délicat à comprendre si vous n’avez pas l’habitude de programmer ou si vous n’êtes pas habitué aux modèles d’observateurs. La façon dont nous allons obtenir chaque nouveau message est en utilisant un MutationObserver sur le nœud chatbox que nous venons de récupérer. Mettez à jour le fichier pour qu’il corresponde à ce qui suit et ensuite nous allons marcher à travers ce qui se passe:
Premièrement, à la ligne 4, nous définissons une fonction de rappel qui prend une liste de mutations et l’observateur que nous allons créer à la ligne 8. La logique de cette fonction est ce qui est appelé chaque fois que quelque chose change, ou mute, dans le nœud que nous observons.
À la ligne 8, nous créons l’observateur et lui passons notre fonction de rappel. Ensuite, à la ligne 9, nous disons à l’observateur de commencer à observer notre nœud cible et nous passons une configuration qui dit que nous sommes seulement intéressés par les mutations à la childList. Les messages apparaissent comme des nœuds enfants dans le nœud de chatbox que nous observons, donc notre fonction de rappel sera déclenchée chaque fois qu’un nouveau message de chat apparaît. C’est exactement ce que nous voulons !
Mais maintenant nous devons encore obtenir les éléments réels du message et pour cela nous ajoutons une ligne de code supplémentaire dans notre callback :
Le nom peut sembler un peu bizarre, mais toutes les parties de texte d’un message (nous ne scannons pas les emotes, juste les textes réels) sont placées dans des éléments HTML <span> qui ont la classe text-fragment. De plus, parce que cette fonction est déclenchée à chaque nouveau message, nous savons que le message que nous voulons doit être le dernier élément du nœud chatbox, c’est pourquoi nous saisissons le lastElementChild.
Changer les mots marqués en leurs homologues amicaux
Venons-en à la partie juteuse. Si nous voulons changer les mots marqués, nous avons d’abord besoin de quelque chose qui nous indique quels sont les mots marqués et leurs homologues. Nous allons le faire en utilisant un simple dictionnaire. Mettez à jour le fichier pour qu’il ressemble à ceci:
Maintenant nous allons lire le texte réel dans tous les éléments de fragments de texte, boucler sur tous les mots interdits et les remplacer si nécessaire. Commençons cette boucle, donc mettez à jour votre fonction de rappel avec ce qui suit:
Ce qui se passe ici est que nous bouclons à travers tous ces éléments qui contiennent du texte. À la ligne 18, nous prenons un élément spécifique à la fois et à la ligne 19, nous obtenons le texte réel en minuscules, car les mots marqués sont également tous en minuscules. C’est plus facile pour les comparaisons, mais dans une version plus avancée, nous prendrions soin de maintenir soigneusement la casse. Maintenant que nous avons notre texte, nous voulons boucler sur nos mots marqués et vérifier s’ils sont présents. Si c’est le cas, nous les supprimons. Mettez à jour la fonction :
Le dictionnaire que nous avons créé fonctionne avec des paires clé-valeur, où les clés sont les mots marqués et les valeurs sont les mots amis, donc à la ligne 21 nous obtenons simplement un tableau de toutes les clés, qui est le tableau des mots marqués sur lequel nous voulons boucler. Dans la boucle, nous récupérons le mot marqué que nous regardons actuellement et si notre texte inclut un ou plusieurs d’entre eux, nous récupérons le mot ami et mettons à jour notre texte en remplaçant les mots marqués. C’est presque tout, maintenant nous devons juste prendre notre texte nouveau et amélioré et le remettre dans l’élément d’où nous l’avons récupéré :
À la ligne 31 nous avons maintenant replacé le texte dans l’élément et c’est tout ! Passons au test dans Chrome.
Le test
Ouvrez Chrome et naviguez vers chrome://extensions. Vous devriez voir vos extensions et en haut à droite, vous verrez le mode développeur. Activez-le si ce n’est pas encore le cas. Ensuite, en haut à droite, vous verrez l’option Load unpacked. Nous allons l’utiliser pour charger notre extension locale sans avoir à passer par le Chrome Web Store pour le moment. Cliquez dessus et sélectionnez le dossier où se trouvent les fichiers :
Cela devrait la faire apparaître instantanément dans notre liste d’extensions :
Bien ! Maintenant, allons sur n’importe quel canal où nous pouvons discuter. Je vais aller sur la chaîne de mon ami Bjarke, un streamer danois hilarant, et l’essayer :
Voilà, ça marche ! Notre propre filtre à blasphèmes. Ce n’était pas si difficile, hein ? Il ne reste plus qu’à le publier sur le Chrome Web Store si vous le souhaitez. Je développerai cette liste de mots et la publierai, donc si vous n’avez pas besoin de plus, vous n’avez pas besoin de la publier, étant donné que l’accès au programme est payant. Je ne vais pas entrer dans la façon dont la libération fonctionne, mais si vous êtes intéressé, j’ai fait une extension d’émote Twitch pour obtenir vos propres créneaux d’émote illimités et cet article explique comment libérer des extensions à la fin.
Si vous voulez voir tout le code de cette extension, consultez le repo GitHub ici. Joyeux codage !