我正在尝试做一个chrome查找和替换扩展程序，但是它不起作用

Question

I've looked through four or five examples on here and other sites, and they all give me a similar way to do it, but it isn't working.

//Manifest

{
    "manifest_version": 2,
    "name": "Screw My Ex",
    "permissions": [
    "https://www.facebook.com/*"
    ],
    "description": "Replaces her name",
    "version": "0.1",
    "content_scripts": [
        {
            "matches": [
                "https://www.facebook.com/*"
            ],
           "js": [
                "content.js"
            ],
            "run_at": "document_end"
        }
    ]
}

//content.js

document.body.innerHTML = document.body.innerHTML.replace(new RegExp("the", "g"), "teh");

I have, for her sake, removed the actual name and replaced it with the and teh. Even doing this it doesn't work. According to every place I check this should work , but it doesn't, and I don't know why. I am mostly oing this to brush up on JS and gradually make more and more elaborate extensions for myself, but I'm pretty frustrated at this right now. Can anyone help me with this?

Answer 1

Its not incorrect, but this won't work for content that loaded after document_end which is most of the content on facebook ( it is dynamically loaded ). Try replacing your name and it should work.

I tried it in my extension and it is showing intended behaviour .

To change dynamically loaded content, you will have to call it after every content load. Or to keep it simple ( but inefficient ) you can use javascript setInterval to call the replace periodically.

ref : http://www.w3schools.com/jsref/met_win_setinterval.asp

EDIT :

There are other ways but my prefered way is using mutation observers,

    var obs = new MutationObserver(function(mutations, observer) {
        for(var i=0; i<mutations.length; ++i) {

            //dom mutation observed, do your replace here

            for(var j=0; j<mutations[i].addedNodes.length; ++j) {

                     // every mutated dom node triggers 
                     // this area so you can check for 
                     // specific case when news feed etc are 
                     // mutated to make it even more sleek
                }
            }
        }
    });

    obs.observe( target, params);