3

Update: With guidance from "am no I am", I've solved this; working code at the end.

I'm working on my first Chrome extension at the moment, which is intended to perform text replacement on viewed webpages. I've been going all over trying to get my head around DOM manipulation, and I've eventually come up with the following. In theory this should go through the whole DOM table, find text nodes, clone them, replace the text (where applicable), and replace the original node with the clone.

Here's my manifest.json...

{
    "name": "My app",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Do thing.",
    "permissions": [
        "tabs", "http://*/"
    ],
    "content_scripts": [
        {
            "matches": ["http://*/*"],
            "js": ["myapp.js"],
            "run_at": "document_end"
        }
    ]
}

And the myapp.js;

function myapp() {
    var nodes = document.getElementsByTagName("*");
        for(var i = 0; i < nodes.length; i++) {
             if(nodes[i].type == "text") {
                  var parent = nodes[i].parentnode;
                  var newnode = nodes[i].cloneNode(true);
                  newnode.data.replace("test text","replacement test text");
                  parent.replaceChild(newnode, nodes[i]);
             };
        };
};
myapp();

I have the extension imported and activated. Chrome's javascript console has shown errors with it previously, which implies it's running, but has none now, which implies no basic typo-style errors. I assume either I'm wrong about how to alter or swap the text nodes, or have a basic misunderstanding of how to set up the manifest file or the js file, but I've hit a wall trying to figure out which.

Any help would be gratefully received!

Update: Here's the working version.

function myapp() {
    var nodes = document.getElementsByTagName("*");
    for(var i = 0; i < nodes.length; i++) {
         var subNodes = nodes[i].childNodes;
         for (var j = 0; j < subNodes.length; j++) {
            var node = subNodes[j];
            if (node.nodeType === 3) {
                if (node.data) {
                    node.data = node.data.replace(/test text/g,"replacement test text");
                }
            }
        }
    }
};
myapp();

1 Answer 1

3

There may also be issues with the iteration since you're modifying the DOM, and nodes is a "live" NodeList that will update with DOM changes.

Not sure if this is an issue since you seem to be doing a swap at the same index, but I'm not sure. You could try converting the NodeList to an Array, or try iterating in reverse.


But since you're only dealing with text nodes, it would seem that you don't need the .replaceChild at all. You could just update the .data of the text node directly.


One more thing is that you're checking the .type property, when it should probalby be the .nodeType property...

if(nodes[i].nodeType == 3) {

Or the nodeName...

if(nodes[i].nodeName == '#text') {

Oh, one more thing. You can't get text nodes using getElementsByTagName('*'), because it only fetches elements.

If you decide to do it that way, you'll need to add code to deal with the child text nodes of the elements.

function myapp() {
    var nodes = document.getElementsByTagName("*");
    for(var i = 0; i < nodes.length; i++) {
         var el = nodes[i];
         for (var j = 0; j < el.childNodes; j++) {
             var node = el.childNodes[j];
             if (node.nodeType === 3)
                 node.data = node.data.replace("test text","replacement test text");
         }
    }
};
5
  • Oooh blimey, lots to look into! Thanks for all the tips :)
    – aawood
    Commented Apr 11, 2012 at 22:14
  • @aawood: I just added more content. You're not fetching any text nodes, just elements. I'll give another update with a possible solution.
    – user1106925
    Commented Apr 11, 2012 at 22:15
  • Got it! Thanks for all your help, I dread to think how long it would have taken without your lead. I'll update the description with the solution.
    – aawood
    Commented Apr 12, 2012 at 6:36
  • @aawood: You're welcome, though I think you may have deleted a line from your working version. I don't see any collection assigned to subNodes.
    – user1106925
    Commented Apr 12, 2012 at 13:17
  • Gahh, yes, quite right! That's what I get for changing the code a little while adding it to the post! I'll fix it now :)
    – aawood
    Commented Apr 12, 2012 at 18:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.