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

Question

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

\n\n

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

\n\n

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

\n\n

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

\n\n

这是代码，改编自/sf/answers/420864181/#6012345，并进行了微小的更改。

\n\n

// manifest.json\n\n{\n    "manifest_version": 2,\n    "name": "Replace Text",\n    "version": "1.0", \n\n    "content_scripts": [ {\n        "js": [ "jquery.min.js", "replace.js" ],\n        "matches": [ "<all_urls>" ],\n        "run_at": "document_end"\n    } ]\n}\n\n\n// replace.js\n\njQuery.fn.textWalk = function( fn ) {\n    this.contents().each( jwalk );\n\n    function jwalk() {\n        var nn = this.nodeName.toLowerCase();\n        if( nn === \'#text\') {\n            fn.call( this );\n        } else if( this.nodeType === 1 && this.childNodes && this.childNodes[0] && nn !== \'script\' && nn !== \'textarea\' ) {\n            $(this).contents().each( jwalk );\n        }\n    }\n    return this;\n};\n\n$(\'body\').textWalk(function() {\n    this.data = this.data.replace(\'This Text\', \'That Text\');\n    this.data = this.data.replace(/[Rr]eplace\\s[Ss]ome\\s[Tt]ext/g, \'with other text\');  \n});\n

\n\n

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

\n\n

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

\n

Answer 1

一个可行的替代方案是通过MutationObserver监听 DOM 更改，并动态更改 TextNodes（或其他内容）的内容。从技术上讲，这种情况不会在渲染任何内容之前发生，但它应该足够接近，让用户不会注意到（除非您所做的更改很大）。

另请参阅我对类似问题的回答。

示例代码

（这仍然需要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）childList

清单.json：

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

如果您决定采用MutationObserver方法，那么这个 JS 库应该会让您的生活更轻松：mutation-summary

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