3

Estou tentando desenvolver uma extensão para o Chrome, e ainda estou nos primeiros passos, e logo no começo já estou empacado. Sei bem pouco de javascript mas tento fazer o que posso pesquisando. Essa extensão é inspirada no FoxReplace do , ou seja, é uma extensão que procura por todas as entradas designadas pelo usuário na página que for e substitui por qualquer outro texto que o usuário colocar.

Achei uma extensão para o Chrome no e usei ela como referência, mas por ela ser hiper simples (apenas pegar "The Cloud" e substituir por "my butt" -- sim, é bem tosco mesmo), não dá pra seguir muita coisa, além de que o código escrito lá eu ainda não sei interpretar muito bem pra poder colocar o que pretendo.

O que eu já tentei (do zero):

Coloquei:

var str = "Texto da substituição";
var res = str.replace(/Será substituído/gim,"Substituirá");

Mas não funciona do jeito que queria, porque além de isso só procurar pelo termo dentro de "Texto da substituição", ao invés de todo o documento, ainda por cima precisa de algo pra iniciar a busca pelos termos, que procurei em vários sites, mas tudo que achei foi códigos pra colocar diretamente no HTML da página, na tag body, o que eu acho que, se não estou errado, passaria a não ter contato com a extensão, por fazer parte da página e não do aplicativo.

A extensão que eu peguei usa walk(document.body) e depois define a função walk(node) com a "statement" (não sei como isso é chamado em português) switch (node.nodeType), que pelo que vi, funciona do jeito esperado, mas precisa de várias correções porque falha em várias situações diferentes.

Portanto, eu gostaria que alguém me explicasse o funcionamento do walk, do switch e dos cases do jeito que eles foram usados, e/ou me dizer como fazer isso que eu pretendo de um modo mais apropriado para a minha intenção. Essa extensão que peguei, tendo eu editado com o que eu sei, funciona até que bem, o problema são os bugs e umas coisas meio inexplicáveis que acontecem com o código principal dele, que só vou poder, talvez, corrigir, quando entender o conteúdo.

Código fonte da extensão de referência

2 Respostas 2

5

Estou assumindo que você está familiarizado com a sintaxe de JavaScript, se sabe como um switch e case funciona. Se estiver enganado, sugiro começar com um tutorial de JavaScript, ou talvez fazer uma pergunta mais específica (tipo: "como funciona o swith no JavaScript?").

No código de exemplo postado, walk é uma função recursiva que "visita" um elemento, depois visita todos os seus sub-elementos. Portanto, se seu HTML for algo do tipo:

<body>
    <div id="a">
        <span id="b"></span>
        <span id="c"></span>
    </div>
    <div id="d">
        <span id="e"></span>
    </div>
    <div id="f"></div>
</body>

Ele vai visitar nessa ordem: body, div#a, span#b, span#c, div#d, span#e, div#f. Isso é o que os 3 primeiros cases fazem - se o elemento visitado for do tipo "elemento, "documento" ou "fragmento de documento", visite seus filhos. Dessa forma, todo o conteúdo do documento será visitado, como você quer.

Já o outro case é para tratar de nós de texto. Um nó de texto é simplesmente o conteúdo textual de um elemento. Por exemplo, os nós de texto do exemplo abaixo:

<span>Este <b>é</b> um texto <i>formatado</i>.</span>

são:

  • Em span: "Este ", " um texto ", "."
  • Em b: "é"
  • Em i: "formatado"

Toda vez que um nó de texto é visitado ele chama o handleText, que por sua vez pega o conteúdo desse nó (i.e. uma string) e põe na variável v. Ele altera a variável v, e depois atribuir de volta ao nó de texto.

Espero que isso tenha te ajudado a entender como o exemplo funciona, de modo que você possa adaptá-lo para fazer o que quer. Por exemplo, para fazer a substituição que você quer, basta fazê-lo na variável v, em vez de criar uma variável nova (str).

v = v.replace(/Será substituído/gim,"Substituirá")

Mover os textos "hardcoded" para uma variável, de modo a ficar mas fácil modificá-la:

var de = /Será substituído/gim;
var para = "Substituirá";

...

v = v.replace(de, para);

E por fim achar um meio de atribuir valores para essas duas variáveis. Não tenho experiência com extensões do Chrome e portanto não sei se essa é a melhor maneira, mas um jeito seria simplesmente usar prompt:

var de = new RegExp(prompt("Entre com o texto a procurar", "Será substituído"), "gim");
var para = prompt("Entre com o texto a substituir", "Substituirá");

...

(O segundo argumento é um valor padrão, que você pode omitir se não quiser um)


Atualização: normalmente um iframe não tem seu conteúdo navegado - em especial se for de um domínio diferente - por razões de segurança. Mas em se tratando de uma extensão do browser, talvez isso seja permitido nesse caso. Experimente tratar explicitamente do caso do iframe, modificando o primeiro case da seguinte forma:

    next = child.nextSibling;
    if ( child.tagName === "iframe" )     // Se for um iframe...
        walk(child.contentDocument.body); // ...acessa o body do seu documento.
    else             // Senão...
        walk(child); // ...percorre normalmente.
    child = next;
2
  • Algo que eu não consigo entender é o motivo de esse script não funcionar em iframes, como por exemplo, os comentários do plugin do Facebook. Se o 4° case serve para qualquer texto visível da página, por que cargas d'água ele não consegue enxergar o texto dentro do iframe?? Já tentei tudo quanto é linha de código voltado aos iframes pra ver se conseguia encontrar os termos dentro dele, mas nada funcionou.
    – Yuuza
    11/04/2014 às 22:44
  • @BrunoLopes A partir do DOM da página principal, você não consegue acessar o conteúdo dos iframes - em especial de um domínio diferente - por razões de segurança. Sendo uma extensão do browser, talvez ele tenha privilégios adicionais, não sei... Atualizei minha resposta com mais detalhes.
    – mgibsonbr
    11/04/2014 às 23:14
2

Para procurar em todo o documento você precisa do conteúdo do corpo.

var search = /(Texto\s+da\s+substituição|Outro)/gi;
var replace = 'Substituir por isto';

var body = document.getElementsByTagName('body')[0];
body_content = body.innerHTML.replace(search, replace);
body.innerHTML = body_content;
1
  • Esse código funcionou, mas só para os textos que estão em forma "crua", simples. Não funciona em iframes, que é a minha principal intenção.
    – Yuuza
    11/04/2014 às 22:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .