Chrome extension to replace DOM text nodes ... not

Update: with a guide from "I'm Not Me," I solved it; working code at the end.

I am currently working on my first Chrome extension, which is intended to replace text on browsed web pages. I keep trying to figure out how to manipulate the DOM, and I eventually came up with the following. Theoretically, this should go through the entire DOM table, find text nodes, clone them, replace text (where applicable), and replace the original node with a clone.

Here is 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 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();

, . javascript Chrome , , , . , , , js, , , .

!

: .

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();
+3
1

, DOM, nodes - "" NodeList, DOM.

, , , , , . NodeList .


, , .replaceChild. .data node .


, .type, .nodeType...

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

nodeName...

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

, . getElementsByTagName('*'), .

, .

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");
         }
    }
};
+3

All Articles