>
Eu faço muitos projectos relacionados com o Twitch aqui e ali, a tentar ver quais são as possibilidades. Um dos meus últimos projectos envolveu a criação de uma Extensão Twitch Emote para o cromado onde mostrei como obter “slots” emotivos extra de graça. Isso me levou às extensões do navegador, então pensei em mostrar como fazer uma do zero, construindo um filtro profanity para o chat do Twitch.
No final disso, queremos ter uma extensão que, quando instalada, verifique um conjunto de palavras sinalizadas no chat e as substitua por versões mais amigáveis. Isto pode ser útil para crianças que assistem a streams, por exemplo.
Se você quiser apenas o código para esta extensão, há um link para o resultado final no final deste artigo.
Alright, então vamos entrar primeiro. Crie uma pasta em algum lugar que você goste e chame-a de profanity-filter. Eu criei a minha em um lugar onde eu sincronizo com GitHub.
Agora dentro desta pasta, crie dois novos arquivos: manifest.json e content.js. Você verá como vamos usá-los ao construir a extensão.
Abrir manifesto.json, que é o arquivo que o Google procura por metadados sobre sua extensão, e cola o seguinte nele:
{ "manifest_version": 2, "name": "Twitch Profanity Filter Extension", "version": "0.1", "content_scripts": , "js": } ]}
Como você pode ver, estamos dizendo ao Google que essa extensão deve funcionar em qualquer página do Twitch e também estamos dizendo que a lógica que deve ser executada nessas páginas reside no arquivo chamado content.js. Note que eu coloquei a versão como 0.1, pois esta é minha tentativa inicial.
Pôr a lógica em
Agora abra content.js no editor de texto de sua escolha. Eu recomendaria muito o Visual Studio Code, é o meu editor de texto para qualquer coisa relacionada a codificação e é gratuito.
Agora, a forma como vamos configurar isto é em alguns passos. O que queremos alcançar e como vamos conseguir isso? Sabemos que queremos mudar certas palavras para outras, o que significa ler as mensagens do chat, escaneá-las por palavras sinalizadas e depois atualizá-las para palavras mais amigáveis. Portanto, quando a página carregar, queremos que a nossa lógica seja capaz de fazer o seguinte:
- Localizar o chatbox
- A cada vez que uma nova mensagem de chat aparecer, obtenha a mensagem ou contentor de mensagem
- Mude as palavras assinaladas para as suas homólogas amigáveis
Então vamos a isso. A primeira parte é realmente activar o script quando a página, ou mais especificamente a janela, tiver sido carregada. No javascript, você pode se conectar a esse evento de carregamento e nós vamos fazer exatamente isso. Atualize seu conteúdo.js para conter o seguinte:
>
Isso vai garantir que tudo o que colocarmos dentro dessa função, será chamado quando a página tiver sido carregada.
> Encontrar a chatbox
Então, como encontramos a chatbox? Bem, na versão Chrome do site Twitch, a chatbox está contida num elemento <div> que tem uma classe chamada chat-scrollable-area__message-container. Nós vamos obter esse elemento, ou nó, através do javascript. Atualize o arquivo para ficar assim:
A razão pela qual adicionamos .item(0) atrás dele, é porque getElementsByClassName() retorna um array de elementos. Como sabemos que apenas um elemento tem essa classe, nós a retiramos do array especificando que queremos a primeira coisa (a maioria das linguagens de programação começam a contar em 0).
Receba cada nova mensagem no chat
Isso é um pouco mais complicado de entender se você não está acostumado a programar ou não está acostumado a observar padrões. A forma como vamos receber cada nova mensagem é usando um MutationObserver no nó do chatbox que acabamos de captar. Atualize o arquivo para combinar com o seguinte e então vamos caminhar pelo que está acontecendo:
>
Primeiro, na linha 4, definimos uma função de retorno que leva uma lista de mutações e o observador que vamos criar na linha 8. A lógica nesta função é o que é chamado sempre que algo muda, ou sofre mutações, no nó que estamos observando.
Na linha 8, criamos o observador e passamos a ele nossa função de callback. Então, na linha 9, dizemos ao observador para começar a observar nosso nó alvo e passamos uma configuração que diz que só estamos interessados em mutações para a childList. As mensagens aparecem como nós crianças no nó de chatbox que estamos olhando, então nossa função de retorno será acionada toda vez que uma nova mensagem de chat aparecer. É exatamente isso que queremos!
Mas agora ainda precisamos obter os elementos reais da mensagem e para isso adicionamos mais uma linha de código na nossa callback:
O nome pode parecer um pouco estranho, mas todas as partes de texto de uma mensagem (não estamos escaneando emotes, apenas os textos reais) são colocados em <span> elementos HTML que têm a classe texto-fragmento. Além disso, como essa função é acionada a cada nova mensagem, sabemos que a mensagem que queremos deve ser o último elemento no nó chatbox, por isso estamos pegando o últimoElementChild.
Alterar palavras sinalizadas para seus colegas amigáveis
Vamos para o bit suculento. Se quisermos mudar as palavras sinalizadas, precisamos primeiro de algo que nos diga o que são palavras sinalizadas e as suas contrapartidas. Vamos fazer isso usando um dicionário simples. Atualize o arquivo para ficar assim:
>
Agora vamos ler o texto real em todos os elementos do fragmento de texto, passar em loop sobre todas as palavras proibidas e substituí-las se necessário. Vamos começar esse loop, então atualize sua função de retorno com o seguinte:
>
O que está acontecendo aqui é que estamos fazendo loop através de todos esses elementos que contêm texto. Na linha 18 estamos pegando um elemento específico de cada vez e na linha 19 obtemos o texto real em minúsculas, porque nossas palavras sinalizadas estão todas em minúsculas também. Isso facilita a comparação, mas em uma versão mais avançada nós cuidaríamos de manter o invólucro em maiúsculas. Agora que temos o nosso texto, queremos passar por cima das nossas palavras sinalizadas e verificar se elas estão presentes. Se assim for, apagamo-las. Atualize a função:
O dicionário que fizemos funciona com pares de palavras-chave de valor, onde as chaves são as palavras sinalizadas e os valores são as palavras amigáveis, então na linha 21 estamos simplesmente obtendo um array de todas as chaves, que é o array de palavras sinalizadas que queremos sobrepor. No loop nós pegamos a palavra sinalizada que estamos olhando atualmente e se nosso texto inclui uma ou mais delas, nós pegamos a palavra amigável e atualizamos nosso texto substituindo as palavras sinalizadas. Isso é quase tudo, agora só precisamos pegar nosso texto novo e melhorado e colocá-lo de volta no elemento de:
Na linha 31 colocamos agora o texto de volta no elemento e pronto! Vamos começar a testar isto em Chrome.
O teste
Abrir Chrome e navegar para cromado://extensões. Você deve ver suas extensões e no canto superior direito você verá o modo Developer. Ative-o se ainda não estiver. Depois, no canto superior direito, você verá a opção Load unpacked (Carregar descompactado). Vamos usá-la para carregar na nossa extensão local sem ter de passar pela rota da Loja Web Chrome ainda. Clique sobre ela e selecione a pasta onde os arquivos estão localizados:
Isso deve fazer com que ela apareça instantaneamente em nossa lista de extensões:
Bom! Agora vamos para qualquer canal onde possamos conversar. Vou ao canal do meu amigo Bjarke, uma hilariante serpentina dinamarquesa, e experimentar:
>>
>
>
Lá vamos nós, funciona! O nosso próprio filtro de profanidades. Não foi assim tão difícil, certo? Tudo o que resta é liberá-lo para a Loja Web Chrome, se você quiser. Eu estarei expandindo nesta lista de palavras e liberando isto, então se você não precisa mais do que isto, você não precisa liberá-lo, já que requer uma taxa para entrar no programa. Eu não vou entrar em como o lançamento funciona, mas se você estiver interessado, eu fiz uma Extensão Twitch Emote para obter seus próprios slots de emoções ilimitadas e este artigo explica como lançar extensões no final.
Se você quiser ver todo o código para esta extensão, confira o repo do GitHub aqui. Feliz codificação!