Fac o mulțime de proiecte legate de Twitch aici și acolo, încercând să văd care sunt posibilitățile. Unul dintre cele mai recente proiecte ale mele a implicat crearea unei extensii Twitch Emote pentru Chrome, în care am arătat cum să obțineți „sloturi” emote suplimentare gratuite. Asta m-a făcut să mă interesez de extensiile de browser, așa că m-am gândit să arăt cum să creez una de la zero, construind un filtru de blasfemie pentru chat-ul Twitch.
La finalul acestui proiect, vrem să avem o extensie care, atunci când este instalată, verifică un set de cuvinte marcate în chat și le înlocuiește cu versiuni mai prietenoase. Acest lucru ar putea fi util pentru copiii care se uită la stream-uri, de exemplu.
Dacă vreți doar codul pentru această extensie, există un link către rezultatul final în partea de jos a acestui articol.
În regulă, așa că haideți să ne apucăm de treabă cu capul înainte. Creați un folder undeva unde doriți și numiți-l profanity-filter. Eu l-am creat pe al meu într-un loc unde mă sincronizez cu GitHub.
Acum, în interiorul acestui folder, creați două fișiere noi: manifest.json și content.js. Veți vedea cum le vom folosi pe măsură ce vom ajunge să construim extensia.
Deschideți manifest.json, care este fișierul la care se uită Google pentru metadate cu privire la extensia dvs. și lipiți următoarele în el:
{ "manifest_version": 2, "name": "Twitch Profanity Filter Extension", "version": "0.1", "content_scripts": , "js": } ]}
După cum puteți vedea, îi spunem lui Google că această extensie ar trebui să funcționeze pe orice pagină de la Twitch și spunem, de asemenea, că logica care ar trebui să fie executată pe aceste pagini se află în fișierul numit content.js. Rețineți că am pus versiunea ca fiind 0.1, deoarece aceasta este prima mea încercare.
Instalarea logicii
Acum deschideți content.js în editorul de text ales de dvs. Aș recomanda cu căldură Visual Studio Code, este editorul meu de text preferat pentru tot ceea ce este legat de codare și este gratuit.
Acum, modul în care vom configura acest lucru este în câțiva pași. Ce vrem să obținem și cum vom realiza acest lucru? Știm că vrem să schimbăm anumite cuvinte cu altele, ceea ce înseamnă să citim mesajele de chat, să le scanăm în căutarea cuvintelor marcate și apoi să actualizăm acele cuvinte cu altele mai prietenoase. Așadar, atunci când se încarcă pagina, dorim ca logica noastră să fie capabilă să facă următoarele:
- Găsește căsuța de chat
- De fiecare dată când apare un nou mesaj de chat, obține mesajul sau containerul de mesaje
- Schimbă cuvintele marcate cu omologii lor prietenoși
Așa că haideți să trecem la treabă. Prima parte este activarea efectivă a scriptului atunci când pagina, sau mai precis fereastra, a fost încărcată. În javascript, vă puteți agăța de acel eveniment de încărcare și exact asta vom face. Actualizați fișierul content.js pentru a conține următoarele:
Acesta se va asigura că orice am pune în interiorul acelei funcții, va fi apelat atunci când pagina a fost încărcată.
Găsește chatbox-ul
Atunci cum găsim chatbox-ul? Ei bine, în versiunea Chrome a site-ului Twitch, chatbox-ul este conținut într-un element <div> care are o clasă numită chat-scrollable-area__message-container. Vom obține acel element, sau nod, prin javascript. Actualizați fișierul pentru a arăta astfel:
Motivul pentru care adăugăm .item(0) în spatele lui, este pentru că getElementsByClassName() returnează o matrice de elemente. Din moment ce știm că doar un singur element are această clasă, îl luăm din array specificând că vrem primul lucru (majoritatea limbajelor de programare încep să numere de la 0).
Obțineți fiecare mesaj nou din chat
Acest lucru este puțin mai dificil de înțeles dacă nu sunteți obișnuit cu programarea sau dacă nu sunteți obișnuit cu modelele de observator. Modul în care vom obține fiecare mesaj nou este prin utilizarea unui MutationObserver pe nodul chatbox pe care tocmai l-am preluat. Actualizați fișierul pentru a se potrivi cu următoarele și apoi vom analiza ce se întâmplă:
În primul rând, la linia 4, definim o funcție callback care primește o listă de mutații și observatorul pe care îl vom crea la linia 8. Logica din această funcție este cea care este apelată de fiecare dată când ceva se schimbă, sau suferă mutații, în nodul pe care îl observăm.
La linia 8 creăm observatorul și îi transmitem funcția noastră de apelare. Apoi, la linia 9, îi spunem observatorului să înceapă să observe nodul nostru țintă și îi transmitem o configurație care spune că suntem interesați doar de mutații la childList. Mesajele apar ca noduri copil în nodul chatbox pe care îl observăm, astfel încât funcția noastră de callback va fi declanșată de fiecare dată când apare un nou mesaj de chat. Este exact ceea ce ne dorim!
Dar acum mai trebuie să obținem elementele de mesaj propriu-zise și pentru asta adăugăm încă o linie de cod în callback-ul nostru:
Numele ar putea părea puțin ciudat, dar toate părțile de text ale unui mesaj (nu scanăm emote-urile, ci doar textele propriu-zise) sunt plasate în elemente HTML <span> care au clasa text-fragment. De asemenea, pentru că această funcție este declanșată la fiecare mesaj nou, știm că mesajul pe care îl dorim trebuie să fie ultimul element din nodul chatbox, de aceea luăm lastElementChild.
Schimbă cuvintele marcate în echivalentele lor prietenoase
Să trecem la partea suculentă. Dacă vrem să schimbăm cuvintele marcate, avem nevoie mai întâi de ceva care să ne spună ce sunt cuvintele marcate și omologii lor. Vom face acest lucru folosind un dicționar simplu. Actualizați fișierul astfel încât să arate așa:
Acum vom citi textul real în toate elementele text-fragment, vom trece în buclă peste toate cuvintele interzise și le vom înlocui dacă este necesar. Să începem această buclă, așa că actualizați funcția callback cu următoarele:
Ceea ce se întâmplă aici este că facem o buclă prin toate aceste elemente care conțin text. Pe linia 18, luăm câte un element specific pe rând, iar pe linia 19 obținem textul real din acesta în minuscule, deoarece cuvintele marcate sunt toate în minuscule. Acest lucru ușurează compararea, dar într-o versiune mai avansată am avea grijă să menținem în mod ordonat majusculele. Acum că avem textul nostru, dorim să facem o buclă peste cuvintele marcate și să verificăm dacă acestea sunt prezente. Dacă da, le ștergem. Actualizați funcția:
Dicționarul pe care l-am făcut funcționează cu perechi cheie-valoare, unde cheile sunt cuvintele marcate și valorile sunt cuvintele prietenoase, așa că la linia 21 obținem pur și simplu o matrice cu toate cheile, care este matricea de cuvinte marcate peste care vrem să facem o buclă. În buclă, luăm cuvântul marcat la care ne uităm în prezent și, dacă textul nostru include unul sau mai multe dintre ele, luăm cuvântul prietenos și actualizăm textul nostru prin înlocuirea cuvintelor marcate. Asta e aproape tot, acum trebuie doar să luăm textul nostru nou și îmbunătățit și să-l punem înapoi în elementul din care l-am luat:
La linia 31 am plasat textul înapoi în element și asta e tot! Să trecem la testarea acestui lucru în Chrome.
Testul
Deschideți Chrome și navigați la chrome://extensions. Ar trebui să vedeți extensiile dvs. și în dreapta sus veți vedea Developer mode. Activați-l dacă nu este încă activat. După aceea, în partea dreaptă sus, veți vedea opțiunea Load unpacked. O vom folosi pentru a încărca extensia noastră locală fără a fi nevoie să trecem încă prin ruta Chrome Web Store. Faceți clic pe ea și selectați folderul în care se află fișierele:
Aceasta ar trebui să o facă să apară instantaneu în lista noastră de extensii:
Bine! Acum haideți să ne îndreptăm spre orice canal pe care putem discuta. Eu mă voi duce pe canalul prietenului meu Bjarke, un streamer danez hilar, și voi încerca:
Iată, funcționează! Propriul nostru filtru de înjurături. Nu a fost atât de greu, nu-i așa? Tot ce mai rămâne este să îl lansați în Chrome Web Store, dacă doriți. Voi extinde această listă de cuvinte și o voi elibera, așa că, dacă nu aveți nevoie de mai mult decât atât, nu trebuie să o eliberați, având în vedere că este nevoie de o taxă pentru a intra în program. Nu voi intra în modul în care funcționează eliberarea, dar dacă sunteți interesat, am făcut o extensie Twitch Emote Extension pentru a obține propriile sloturi emote nelimitate și acest articol explică cum să elibereze extensiile la sfârșit.
Dacă doriți să vedeți tot codul pentru această extensie, verificați repo-ul GitHub aici. Codare veselă!
.