Chrome 扩展程序可在显示文本之前替换网页和 Facebook 帖子中的文本

我正在开发一个 Chrome 扩展程序，它可以替换网页文本中的指定字符串或正则表达式。

总体来说效果很好，但有两个问题我想解决：

(1) 在文本替换发生之前，显示原始的、未更改的网页文本。

(2) 文本替换不会影响滚动到页面底部后动态加载的 Facebook 帖子。

这是代码，改编自https://stackoverflow.com/a/6012345#6012345有微小的变化。

// manifest.json

{
    "manifest_version": 2,
    "name": "Replace Text",
    "version": "1.0", 

    "content_scripts": [ {
        "js": [ "jquery.min.js", "replace.js" ],
        "matches": [ "<all_urls>" ],
        "run_at": "document_end"
    } ]
}


// replace.js

jQuery.fn.textWalk = function( fn ) {
    this.contents().each( jwalk );

    function jwalk() {
        var nn = this.nodeName.toLowerCase();
        if( nn === '#text') {
            fn.call( this );
        } else if( this.nodeType === 1 && this.childNodes && this.childNodes[0] && nn !== 'script' && nn !== 'textarea' ) {
            $(this).contents().each( jwalk );
        }
    }
    return this;
};

$('body').textWalk(function() {
    this.data = this.data.replace('This Text', 'That Text');
    this.data = this.data.replace(/[Rr]eplace\s[Ss]ome\s[Tt]ext/g, 'with other text');  
});

我在网上找到了一些部分答案，但无法让它们正常工作。

例如，提出的一种解决方案是更改"run_at": "document_end" to "run_at": "document_start"。这会在构建 DOM 之前运行内容脚本，因此理论上它应该在显示任何内容之前进行文本替换。但就我而言，它导致扩展完全停止替换文本。

一个可行的替代方案是通过以下方式监听 DOM 更改：变异观察者并动态更改 TextNodes（或其他内容）的内容。从技术上讲，这不会发生before正在渲染任何内容，但它应该足够接近，让用户不会注意到（除非您所做的更改很大）。

另请参阅我对一个问题的回答类似的问题.

示例代码

（这仍然需要twicking，例如处理动态节点更新。）

内容.js：

// Modify the content somehow...
var doFilter = function(textNode) {
    textNode.data = textNode.data + "<br />" + textNode.data;
}

// Create a MutationObserver to handle events
// (e.g. filtering TextNode elements)
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes) {
            [].slice.call(mutation.addedNodes).forEach(function(node) {
                if (node.nodeName.toLowerCase() == "#text") {
                    doFilter(node);
                }
            });
        }
    });
});

// Start observing "childList" events in document and its descendants
observer.observe(document, {
    childList: true,
    subtree:   true
});

（上面的代码用于监听添加的节点。您可能希望有一个观察者监听characterData and childList主体及其后代的变化以“捕获”动态加载/更改的内容。）

清单.json：

...
"content_scripts": [
    {
        "matches": [...],
        "js":         ["content.js"],
        "run_at":     "document_start",
        "all_frames": true
    }
],
...

如果您决定去变异观察者方法，这个 JS 库应该会让你的生活更轻松：突变总结

关于您的问题，为什么在“document_start”执行脚本没有任何效果：
发生这种情况是因为当时（“document_start”）您的脚本没有任何内容可以替换（即在将任何其他内容添加到 DOM 之前加载并运行它）。