Obrigado por visitar a The Game Makers Brasil 😁 Use o fórum de Dúvidas para fazer perguntas. Se está em busca de aprender dê uma olhada nos tutoriais.

[CHATBOX][MINI-TUTO] Script Loader: faça scripts para o Chatbox

Anúncios, Sugestões, Apresentações, Negócios e outras discussões.
Avatar do usuário
Mr.Rafael
Membro
Membro
Reações: 0
Mensagens: 52

[CHATBOX][MINI-TUTO] Script Loader: faça scripts para o Chatbox

Mensagem por Mr.Rafael » Qui Set 08, 2016 6:57 pm

Mini-tuto: Chatbox Script Loader (faça scripts para o Chatbox)

Olá, pessoal. Este é um tutorial bem básico que estou criando para quem tiver interesse em desenvolver pequenos plugins para o Chatbox. Basicamente: se você tiver interesse em criar alguma funcionalidade, alterar o design ou cores, ou manipular mensagens (codificar/decodificar texto, mostrar apenas mensagens de um usuário específico, etc), pode programar um pequeno script e melhorar sua experiência.

Não é algo oficial, seria algo mais parecido com uma brincadeira, eu diria. Você precisará ter um conhecimento mínimo com Javascript (ou pelo menos em alguma linguagem de programação, não é nada tão complexo assim) e usar o "Inspecionar Elemento" no seu navegador.

É, eu sei que isso não tem lá muita utilidade para a maioria das pessoas, mas achei válido deixar pelo menos uma explicação aqui. Já bolei muitos scripts durante esse tempo (alguns úteis, outros não muito úteis, e outros apenas pela zoeira) e gostaria de tentar deixar aqui pelo menos um ensinamento básico para quem acabar se interessando. Pessoalmente, acho que é bacana saber que você pode controlar e personalizar não só o chat, mas também o próprio fórum, com cores e designs que você goste. Com um pouco de criatividade, dá para fazer coisas bem legais.

Introdução

Então... o Chatbox que todos nós vemos nada mais é do que um HTML montado com uma certa estrutura. As mensagens são contidas em elementos <li>, boa parte dos dados que vemos na mensagem (como o nome do usuário, a cor do nome, etc) podem ser obtidos e alterados tranquilamente. O problema é que eles estão bagunçados, com um monte de elementos <div> e <a> no caminho. Sendo assim, precisamos "peneirar" o HTML e tirar o que queremos de lá, isso inclui tanto os dados da mensagem como também os elementos HTML mais relevantes.

Entra então o Chatbox Script Loader, um script presente na página do Chatbox que facilita a obtenção de tudo isso e permite a inserção de novos scripts com uma função insertCustomScript(). Neste tutorial, irei apresentá-lo e demonstrar com um exemplo o que dá para ser feito com ele. Nada tão aprofundado, no entanto (se bem que o Script Loader é tão simples que mesmo este tutorial já deve até ser o suficiente).

Iniciando

Vamos começar com um script "vazio"...

Código: Selecionar todos

/**
 * Script vazio.
 */
insertCustomScript("script-vazio", function(message, index, raw) {
    // ...
});
O primeiro parâmetro é o nome do seu script. Ele deve ser único (se existir um script com o mesmo nome, ele será substituído por este). O próximo parâmetro é a função onde toda a mágica acontece. Também esperamos que esta função receba os seguintes valores:

Parâmetro "message"

Um objeto contendo dados "peneirados" relevantes (não todos) de cada elemento <li> que for percorrido, e suas propriedades são:
  • nick: Nome do autor da mensagem.
  • datetime: Data de envio da mensagem.
  • photo: Avatar de perfil do autor da mensagem.
  • content: Conteúdo da mensagem. Este, porém, é o conteúdo já "processado". Pode-se obter o conteúdo não-formatado usando raw.dataset.mchatMessage.
  • html: Elementos HTML que compõem toda a estrutura da mensagem.
Os elementos existentes na propriedade html são:
  • rootLi
  • photoDiv
  • photoA
  • photoImg
  • mbodyDiv
  • mbodyHeader
  • mbodyHeaderA
  • mbodyHeaderSpan
  • mbodyContent
É, mas não estarei explicando o que é cada um deles. Prefiro manter o nível do tutorial do jeito que está mesmo.

Parâmetro "index"

O Script Loader lê todas as mensagens do Chatbox em sequência. Basicamente, este valor é o índice da mensagem atual.

Parâmetro "raw"

É o próprio elemento HTML da mensagem. Você também pode obtê-lo usando message.html.rootLi.

Script de exemplo: marcar mensagens de um usuário em específico

Como exemplo, vamos fazer um script bem simples: buscaremos pelas mensagens de um usuário em especial e trocaremos a cor delas para que fiquem em destaque. Nada demais, certo?

Código: Selecionar todos

/**
 * Script de exemplo. Insira-o via Inspecionar Elemento.
 * 
 * @author MrRafael
 * @profile http://tgmbr.redscreensoft.com/memberlist.php?mode=viewprofile&u=1397
 */
insertCustomScript("highlight-teste", function(message, index, raw) {
    
    // Como demonstração, buscaremos pelo nome de um usuário e suas 
    // mensagens deverão aparecer para nós com uma cor de destaque. Usamos 
    // o "message" por este objeto já ter boa parte dos dados dos elementos
    // <li> filtrados e organizados. Com isso, fica algo tão fácil quanto 
    // simplesmente perguntar se o nickname é o de quem estamos querendo:
    if(message.nick == "MrRafael") {
        
        // Copiamos o atributo "style" atual do elemento <li> e criamos uma
        // outra variável contendo a propriedade CSS que queremos juntar. 
        // Está organizado assim para que o exemplo seja fácil de ser 
        // acompanhado:
        var rawAttr = raw.getAttribute("style") || "";
        var liColor = "background-color: #98e3e6;";
        
        // Feito isso, juntamos o "style":
        raw.setAttribute("style",  rawAttr + liColor);
        
        }
    }
    
});
Fiz questão de comentar todo o script, para facilitar o entendimento o máximo possível. Sem os comentários, fica apenas isto aqui:

Código: Selecionar todos

/**
 * Script de exemplo. Insira-o via Inspecionar Elemento.
 * 
 * @author MrRafael
 * @profile http://tgmbr.redscreensoft.com/memberlist.php?mode=viewprofile&u=1397
 */
insertCustomScript("highlight-teste", function(message, index, raw) {
    
    if(message.nick == "MrRafael") {
        var rawAttr = raw.getAttribute("style") || "";
        var liColor = "background-color: #98e3e6;";
        raw.setAttribute("style",  rawAttr + liColor);
    }
    
});
Até aí, tudo bem. Este código, por si só, já funcionaria, mas há um problema: esta ação estará sendo executada o tempo inteiro. Como se trata de uma ação única, podemos adicionar uma condição para que ela faça isso apenas uma vez e depois apenas ignore as que já foram marcadas. Podemos fazer isso se aproveitando do fato de que podemos checar por um atributo no raw e, caso ele não exista, apenas executamos o código e o adicionamos no final. Seria algo tão simples quanto isso:

Código: Selecionar todos

/**
 * Script de exemplo. Insira-o via Inspecionar Elemento.
 * 
 * @author MrRafael
 * @profile http://tgmbr.redscreensoft.com/memberlist.php?mode=viewprofile&u=1397
 */
insertCustomScript("highlight-teste", function(message, index, raw) {
    
    // Um pequeno truque para executar uma ação apenas uma única vez para cada 
    // mensagem. É requisitado no "raw" porque ele é o próprio elemento <li> 
    // percorrido. A ideia é que, se a propriedade "read" não existir (e ela 
    // nunca vai existir na primeira vez), a ação é executada e depois ela é 
    // criada, com valor "true".
    if(raw.read != true) {
        
        // Como demonstração, buscaremos pelo nome de um usuário e suas 
        // mensagens deverão aparecer para nós com uma cor de destaque. Usamos 
        // o "message" por este objeto já ter boa parte dos dados dos elementos
        // <li> filtrados e organizados. Com isso, fica algo tão fácil quanto 
        // simplesmente perguntar se o nickname é o de quem estamos querendo:
        if(message.nick == "MrRafael") {
            
            // Copiamos o atributo "style" atual do elemento <li> e criamos uma
            // outra variável contendo a propriedade CSS que queremos juntar. 
            // Está organizado assim para que o exemplo seja fácil de ser 
            // acompanhado:
            var rawAttr = raw.getAttribute("style") || "";
            var liColor = "background-color: #98e3e6;";
            
            // Feito isso, juntamos o "style" e declaramos o atributo "read", 
            // que impedirá que este processo seja executado outra vez.
            raw.setAttribute("style",  rawAttr + liColor);
            raw.read = true;
            
        }
    }
    
});
E aqui, o código sem os comentários:

Código: Selecionar todos

/**
 * Script de exemplo. Insira-o via Inspecionar Elemento.
 * 
 * @author MrRafael
 * @profile http://tgmbr.redscreensoft.com/memberlist.php?mode=viewprofile&u=1397
 */
insertCustomScript("highlight-teste", function(message, index, raw) {
    
    if(raw.read != true) {
        if(message.nick == "MrRafael") {
            var rawAttr = raw.getAttribute("style") || "";
            var liColor = "background-color: #98e3e6;";
            raw.setAttribute("style",  rawAttr + liColor);
            raw.read = true;
            
        }
    }
    
});
Certo, temos um script. Agora vamos testar!

Testando o script via "Inspecionar Elemento"

Abra a página do Chatbox e clique com o botão direito do mouse nela. Escolha a opção "Inspecionar elemento...".

Imagem

Você deverá ver agora do lado direito ou embaixo da página uma tela contendo várias informações. Procure no topo dela pela opção "console" e clique.

Imagem

A partir daí, não há mais muito a ser feito. Apenas copie o script, cole na caixa de comando (a que está mais abaixo) e dê Enter. Se o código estiver limpo (sem erros), você já deverá sentir os efeitos do script. No caso do exemplo, programei para que qualquer mensagem minha no Chatbox tivesse uma cor diferente das demais. Eis o resultado:

Imagem

Feito isso, feche o "Inspecionar Elemento" (deve ter um X num dos lados dele).
A mudança, porém, não é permanente. Ao atualizar a página, o script não terá mais efeito. Entenda também que este código é client-side, ou seja, somente você verá os efeitos (para que outra pessoa também os veja, é necessário que você passe o script para ela, e ela deverá fazer esse mesmo procedimento).

Ah, e tem uma coisa: nunca executem um script se não confiarem no usuário ou se o código possuir alguma parte que você considere "esquisita"! Preferencialmente, distribuam seus scripts de forma organizada e comentada (para ganhar confiança) e busquem dar uma olhada neles antes de rodá-los (mesmo que você não entenda de programação, faça isso... não custa nada garantir). Isso foi algo que sempre levei em consideração quando fazia os meus, justamente para que não houvessem complicações. :detetive:

Fim

Bom... é isso. Eu sei que o exemplo não é tão complexo ou útil assim, mas fiquem à vontade para tentar criar algo para vocês. Já havia feito várias coisas usando isso, começando por reimplementações de algumas funcionalidades do antigo Chatbox (comando "/me", "/clear", etc), alteração de cores do nome, jogos (SIM, inacreditavelmente eu já consegui fazer até jogos usando isso :rsrs:) e até um gerenciador completo de plugins! Basta um pouco de criatividade. :u:

o/

Avatar do usuário
Superbomber
Programador
Programador
Reações: 0
Mensagens: 283
Localização: Natal-RN

Re: [CHATBOX][MINI-TUTO] Script Loader: faça scripts para o Chatbox

Mensagem por Superbomber » Sáb Set 10, 2016 1:31 pm

Que dlç.
Sabia que existe uma extensão de navegador que executa scripts ao acessar uma página?
Infelizmente não me lembro do seu nome. Mas quem souber posta ai. >.<

Isso me fez lembrar quando o Gonça pediu pra eu fazer um script para trocar as cores do chat para tons escuros.

Senti falta de eventos. No caso a função é executada repetitivamente certo?
Se criasse um objeto que pudesse definir eventos seria interessante.
Eventos como ao receber mensagem, ao ser citado no chat.
Ao citar o nick(@[ B]nick[ /B]), ao receber like, ao iniciar o "plugin", ... etc.

Mais ou menos isso:

Código: Selecionar todos

function insertCustomScript(LeNome, TheObject){
   plugins[LeNome] = TheObject;
}

// Uso
insertCustomScript("oqueEuToFazendoMesmo?", {
   OnStart(){
      alert("Meus parabéns! Você instalou o vír.. Digo, o plugin com sucesso. ^_^");
   },
   OnNewMessage(data){
      if(data.message.indexOf("filho da fruta") != -1){
         sendMessage("Vá xingar tu mamãe!");
      }
   },
   OnMentioned(data){
      data.html.div.style.backgroundColor = "#0D0";
   },
   OnCited(){ // ... },
   OnQualquerOutraCoisa(){ //... },
   RepeatForever(){
      alert("Só pra lembrar, meu plugin ainda ta rodando no teu navegador.");
   }
});
Melhor que ficar repetindo... E claro o JS do fórum se encarregaria de executar estes eventos na hora certa.

Não posso fazer uns plugins marotos porque esse Chrome mizerável de Android não tem console ou inspecionar elemento.
Mas se for preciso eu faço meu próprio "navegador" pra entrar no fórum.
O bom é que vou poder executar os plugins logo quando entro no fórum. :twisted:

Na verdade já tava pensando em fazer o bagui do "navegador" que executasse um JS. :detetive:

ALERTA DE SEGURANÇA: Evite executar um script de outra pessoa. Principalmente se você não emtender o funcionamento do script.
O executando podem ter acesso a sua conta, ou até mesmo instalar um vírus em seu computador.
Você foi avisado. :café: (duas vezes)

EDIT: Acho que ficaria melhor retirar a necessidade do "nome"("ID"?) do plugin. Evitar problemas de compatibilidade. :yes:

Só usar .push em uma array.

Código: Selecionar todos

function insertCustomCode(LePlugin){
   plugins.push( LePlugin );
}
Entrem neste link com o JavaScript desabilitado e vejam a mágica: https://tgmbrasil.com.br/?PageSpeed=n0script

Avatar do usuário
Dust
Membro
Membro
Reações: 0
Mensagens: 109
Localização: Santa Catarina

Re: [CHATBOX][MINI-TUTO] Script Loader: faça scripts para o Chatbox

Mensagem por Dust » Sáb Set 10, 2016 4:32 pm

Superbomber escreveu:Que dlç.
Sabia que existe uma extensão de navegador que executa scripts ao acessar uma página?
Infelizmente não me lembro do seu nome. Mas quem souber posta ai. >.<
Por acaso não seria o Tampermonkey?
Eu usei ele pra salvar o script, mas eu achei que o script não tava funcionando, tive que habilitar a função "on/off new script"
Mas ta ai a informação pra quem tivé interessado. Flw!

Avatar do usuário
Superbomber
Programador
Programador
Reações: 0
Mensagens: 283
Localização: Natal-RN

Re: [CHATBOX][MINI-TUTO] Script Loader: faça scripts para o Chatbox

Mensagem por Superbomber » Sáb Set 10, 2016 8:39 pm

Exato. \o/

Apenas para informar o Tampermonkey também existe psra Android. :yes:
Basta verificar no Google Play.
Existe versão para navegador Dolphin também. (Não sei que navegador é esse. ._.)

(Eu fiz um app aqui, que salva scripts e carrega. Mas assim que fechei pra abrir de novo tava offline. ;-;)
Entrem neste link com o JavaScript desabilitado e vejam a mágica: https://tgmbrasil.com.br/?PageSpeed=n0script

Responder

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado e 0 visitante