Tässä lopussa haluamme laajennuksen, joka asennettuna tarkistaa chatissa olevat merkityt sanat ja korvaa ne ystävällisemmillä versioilla. Tämä voisi olla hyödyllistä esimerkiksi lapsille, jotka katsovat streameja.
Jos haluat vain koodin tälle laajennukselle, tämän artikkelin alareunassa on linkki lopputulokseen.
Vai niin, mennäänpä siis pää edellä asiaan. Luo kansio jonnekin haluamaasi paikkaan ja nimeä se profanity-filter. Minä loin omani paikkaan, jossa synkronoin GitHubin kanssa.
Nyt luodaan tämän kansion sisäpuolelle kaksi uutta tiedostoa: manifest.json ja content.js. Tulet näkemään, miten käytämme niitä, kun pääsemme rakentamaan laajennusta.
Avaa manifest.json, joka on tiedosto, josta Google etsii laajennustasi koskevia metatietoja, ja liitä siihen seuraava:
{ "manifest_version": 2, "name": "Twitch Profanity Filter Extension", "version": "0.1", "content_scripts": , "js": } ]}
Kuten näet, kerromme Googlelle, että tämän laajennuksen pitäisi toimia millä tahansa Twitchin sivulla, ja kerromme myös, että logiikka, joka pitäisi ajaa näillä sivuilla, sijaitsee tiedostossa nimeltä content.js. Huomaa, että laitoin versioksi 0.1, koska tämä on ensimmäinen yritykseni.
Logiikan saaminen sisään
Avaa nyt content.js-tiedosto haluamallasi tekstieditorilla. Suosittelen lämpimästi Visual Studio Codea, se on minun go-to-tekstieditori kaikkeen koodaukseen liittyvään ja se on ilmainen.
Nyt, tapa, jolla aiomme asettaa tämän on muutamassa vaiheessa. Mitä haluamme saavuttaa ja miten aiomme saavuttaa sen? Tiedämme, että haluamme vaihtaa tietyt sanat toisiin, mikä tarkoittaa chat-viestien lukemista, niiden skannaamista merkittyjen sanojen varalta ja sitten näiden sanojen päivittämistä ystävällisemmiksi. Kun sivu siis latautuu, haluamme, että logiikkamme pystyy tekemään seuraavaa:
- Etsitään keskustelupalsta
- Aina kun uusi keskusteluviesti ilmestyy, haetaan viesti tai viestisäiliö
- Vaihdetaan merkityt sanat ystävällisiin vastineisiinsa
Lähdetään siis asiaan. Ensimmäinen osa on itse asiassa skriptin aktivointi, kun sivu, tai tarkemmin sanottuna ikkuna, on ladattu. Javascriptissä voit kytkeytyä tuohon lataustapahtumaan, ja aiomme tehdä juuri niin. Päivitä content.js:si sisältämään seuraavaa:
Tämä varmistaa, että mitä ikinä laitammekin tuohon funktioon sisälle, sitä kutsutaan, kun sivu on latautunut.
Etsitään keskustelupalsta
Kuinka sitten löydämme keskustelupalstan? No, Twitch-sivuston Chrome-versiossa chat-laatikko on <div>-elementissä, jonka luokka on nimeltään chat-scrollable-area__message-container. Haemme tuon elementin eli solmun javascriptin avulla. Päivitä tiedosto näyttämään tältä:
Syy siihen, että lisäämme perään .item(0):n, on se, että getElementsByClassName()-funktio palauttaa elementtimassan. Koska tiedämme, että vain yhdellä elementillä on tämä luokka, otamme sen joukosta määrittelemällä, että haluamme ensimmäisen asian (useimmat ohjelmointikielet aloittavat laskennan 0:sta).
Hakee jokaisen uuden viestin chatissa
Tämä on hieman hankalampi ymmärtää, jos et ole tottunut ohjelmointiin tai et ole tottunut havainnointimalleihin. Tapa, jolla aiomme saada jokaisen uuden viestin, on käyttää MutationObserveriä chatbox-solmuun, jonka juuri poimimme. Päivitä tiedosto vastaamaan seuraavaa ja käymme sitten läpi, mitä tapahtuu:
Ensiksi rivillä 4 määrittelemme takaisinsoittofunktion, joka ottaa vastaan listan mutaatioita ja havainnoitsijan, jonka luomme rivillä 8. Tämän funktion logiikka on se, mitä kutsutaan aina, kun jokin muuttuu tai mutantoituu havainnoimassamme solmussa.
Rivillä 8 luomme havainnoitsijan ja annamme sille callback-funktiomme. Sitten rivillä 9 käskemme havainnoitsijaa aloittamaan kohdesolmumme havainnoinnin ja välitämme konfiguraation, joka kertoo, että olemme kiinnostuneita vain childListiin tapahtuvista mutaatioista. Viestit näkyvät tarkastelemamme chatbox-solmun lapsisolmuina, joten callback-funktiomme käynnistyy aina, kun uusi chat-viesti ilmestyy. Juuri sitä me haluamme!
Mutta nyt meidän on vielä saatava varsinaiset viestielementit, ja sitä varten lisäämme vielä yhden koodirivin callbackiimme:
Nimi saattaa tuntua hieman oudolta, mutta kaikki viestin tekstin osat (emme ole skannaamassa emotekstejä, vaan ainoastaan varsinaisia tekstejä) sijoitetaan <span> HTML-elementteihin, joilla on luokka text-fragment. Koska tämä funktio käynnistyy myös jokaisen uuden viestin kohdalla, tiedämme, että haluamamme viestin on oltava chatbox-solmun viimeinen elementti, joten siksi nappaamme lastElementChildin.
Vaihda merkityt sanat ystävällisiin vastineisiinsa
Lähdetäänpä mehukkaaseen kohtaan. Jos haluamme vaihtaa merkityt sanat, tarvitsemme ensin jotain, joka kertoo, mitä merkityt sanat ja niiden vastineet ovat. Teemme tämän käyttämällä yksinkertaista sanakirjaa. Päivitä tiedosto seuraavanlaiseksi:
Luemme nyt varsinaista tekstiä kaikissa tekstifragmentin elementeissä, käymme läpi silmukoiden avulla kaikki kielletyt sanat ja korvaamme ne tarvittaessa. Käynnistetään tuo silmukka, joten päivitä callback-funktiosi seuraavalla:
Tässä vaiheessa käymme silmukalla läpi kaikki nämä tekstiä sisältävät elementit. Rivillä 18 otamme yhden tietyn elementin kerrallaan ja rivillä 19 saamme siitä varsinaisen tekstin pienaakkosin, koska kaikki merkityt sanat ovat myös pienaakkosia. Se helpottaa vertailua, mutta kehittyneemmässä versiossa huolehdimme siitä, että isot kirjaimet säilyvät siististi. Nyt kun meillä on tekstimme, haluamme käydä läpi merkityt sanat ja tarkistaa, ovatko ne läsnä. Jos on, poistamme ne. Päivitä funktio:
Tekemämme sanakirja toimii avain-arvo-pareilla, joissa avaimet ovat merkittyjä sanoja ja arvot ystävällismielisiä sanoja, joten rivillä 21 saamme yksinkertaisesti kaikkien avainten joukon, joka on merkittyjen sana-arvojen joukko, jonka yli haluamme tehdä silmukan. Silmukassa nappaamme sen merkityn sanan, jota parhaillaan tarkastelemme, ja jos tekstimme sisältää yhden tai useamman merkityn sanan, nappaamme ystävällisen sanan ja päivitämme tekstimme korvaamalla merkityt sanat. Siinä on melkein kaikki, nyt meidän täytyy vain ottaa uusi ja parannettu tekstimme ja laittaa se takaisin elementtiin, josta nappasimme sen:
Rivillä 31 olemme nyt sijoittaneet tekstin takaisin elementtiin, ja se siitä! Lähdetään testaamaan tätä Chromessa.
Testi
Avaa Chrome ja selaa osoitteeseen chrome://extensions. Sinun pitäisi nähdä laajennuksesi ja oikeassa yläkulmassa näkyy Developer mode. Kytke se päälle jos se ei vielä ole. Sen jälkeen oikeassa yläkulmassa näet Load unpacked -vaihtoehdon. Käytämme sitä ladataksemme paikallisen laajennuksemme ilman, että meidän tarvitsee vielä mennä Chrome Web Storen kautta. Klikkaa sitä ja valitse kansio, jossa tiedostot sijaitsevat:
Sen pitäisi saada se näkymään heti laajennuksemme luettelossa:
Hyvä! Nyt mennään jollekin kanavalle, jossa voimme keskustella. Menen ystäväni Bjarken kanavalle, joka on hulvaton tanskalainen striimaaja, ja kokeilen sitä:
Niin, se toimii! Meidän ikioma kirosanasuodattimemme. Eihän se niin vaikeaa ollut? Jäljellä on enää sen julkaisu Chrome Web Storeen, jos haluat. Laajennan tätä sanaluetteloa ja vapautan tämän, joten jos et tarvitse tätä enempää, sinun ei tarvitse vapauttaa sitä, koska se vaatii maksun ohjelmaan pääsystä. En aio mennä siihen, miten julkaisu toimii, mutta jos olet kiinnostunut, tein Twitch Emote Extension -laajennuksen, jolla saat omat rajattomat emote-paikat, ja tämä artikkeli selittää lopussa, miten laajennuksia julkaistaan.
Jos haluat nähdä tämän laajennuksen koko koodin, tutustu GitHub-repoon täällä. Hyvää koodausta!