Skip to main content
added 654 characters in body
Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334

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;

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;
Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334

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)