Replace all instance of a string in a webpage on click Javascript

Question

Ok, so I'm making a Chrome extension and I would like to have it so that the extension has 2 buttons, one to turn the extension on, and one to turn it off. While the extension is running, I would like it to replace all instances on the webpage of "ab" to "ef" (just an example). This means that after the user clicks on, the extension will ALWAYS convert "ab" to "ef" on every webpage without having to turn it on each time. I am doing this by means of Javascript. Here is my code (HTML and Javascript), please see what you can do!

JSFiddle: https://jsfiddle.net/syf5f687/

HTML:

<!doctype html>
<html>
  <head>
    <title>AB to EF</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>AB to EF Converter</h1>
    <button id="turnOn">Turn On</button>
    <button id="turnOff">Turn Off</button>
  </body>
</html>

JS (which I think is completely wrong, I haven't even put in the turn off button):

var markup = document.documentElement.innerHTML;

document.addEventListener('DOMContentLoaded', function() {
  var checkPageButton = document.getElementById('turnOn');
  checkPageButton.addEventListener('clickOn', function() {



    chrome.tabs.getSelected(null, function(tab) {
      markup.replace(/ab/, "ef")
    });
  }, false);
}, false);

Related/near duplicate: [Replacing a lot of text in browser's addon](http://stackoverflow.com/questions/37562475/replacing-a-lot-of-text-in-browsers-addon) — Makyen, Sep 08 '16 at 00:41
You will also need to learn how to access the webpage's DOM, which your code indicates you are not doing. See: [How to access the webpage DOM rather than the extension page DOM?](http://stackoverflow.com/questions/4532236/how-to-access-the-webpage-dom-rather-than-the-extension-page-dom) — Makyen, Sep 08 '16 at 00:52
At least as important, you should read the [Overview of Chrome extensions](https://developer.chrome.com/extensions/overview). Reading and understanding that will help prevent you from making many mistakes. — Makyen, Sep 08 '16 at 01:00

score 1 · Answer 1 · answered Sep 08 '16 at 00:07

I would suggest not replacing the html. Firstly you might alter a element tag name accidently, and second replacing html would make the whole document have to re-parse and re-render since you are introducing a new set of html code.

I would suggest walking through the text nodes and replacing the textContent property.

You can do this by using the TreeWalker api. Create a tree walker with createTreeWalker() passing in NodeFilter.SHOW_TEXT to only select text nodes and then replace textContent on each node.

var element = null;
var walker = document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,null,false);
while(element=walker.nextNode()){
   element.textContent = element.textContent.replace(/ab/g,"ef");
}

Note though this will change the text nodes inside script and style tags, so if you do not want it to do that you would add in a filter as the third argument to skip those.

Demo

function changeIt() {
  var element = null;
  var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
  while (element = walker.nextNode()) {
    element.textContent = element.textContent.replace(/ab/g, "ef");
  }
}
document.querySelector("button").addEventListener("click",changeIt);

div {
  padding:5px;
  border:1px solid rgba(0,0,0,0.3);
}

<button>Change text</button>
<div>
  able, dabble, fabble, crabble
  <span>mable, cable, fable</span>
</div>
<div>
  able, dabble, fabble, crabble
  <span>mable, cable, fable</span>
</div>
<div>
  able, dabble, fabble, crabble
  <span>mable, cable, fable</span>
  <div>
    able, dabble, fabble, crabble
    <span>mable, cable, fable</span>
    <div>
      able, dabble, fabble, crabble
      <span>mable, cable, fable</span>
    </div>
  </div>
</div>

While this covers well how to do the actual replacement, from the OP's code it is clear that he also needs to understand how to implement injecting a content script to gain access to the webpage's DOM. Without covering that (or even mentioning it) this is just part of an answer. — Makyen, Sep 08 '16 at 01:04

Replace all instance of a string in a webpage on click Javascript

1 Answers1