如何在无限滚动页面上重复运行 Chrome 扩展代码答案

【问题标题】：How to run Chrome extension code repeatedly on infinite scroll pages如何在无限滚动页面上重复运行 Chrome 扩展代码
【发布时间】：2019-12-10 07:44:30
【问题描述】：

这是我的第一个 Chrome 扩展程序。我正在构建一个扩展来替换页面上的文本。

所提供的代码适用于由 DOMContent 加载的任何内容。但是在使用某种无限滚动的页面上，当加载新内容时不会发生文本替换。

我需要它来对稍后添加到页面的任何内容运行文本替换。

我曾尝试使用 onscroll 事件侦听器，但这既尴尬又昂贵。我确信有更好的方法。

我已经研究过使用清单 run_at，但找不到使用它的方法。

let elements = document.getElementsByTagName('*');
let replacements = {
    "first to replace": "new text",
    "second to replace": "also new text"
};
let keys = Object.keys(replacements);

 RegExp.quote = (str) => {
     return str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
 };

let makeItAwesomer = () => {
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];

        for (var j = 0; j < element.childNodes.length; j++) {
            let node = element.childNodes[j];

            if (node.nodeType === 3) {
                let text = node.nodeValue;
                let newText = text;

                if(keys.some(function(key){ 
                    return ~text.toLowerCase().indexOf(key.toLowerCase());
                })){

                    keys.forEach( key => {
                        let regex = new RegExp(RegExp.quote(key), "gi");
                        newText = newText.replace(regex, replacements[key]);
                    });

                    if (newText != text) {
                        element.replaceChild(document.createTextNode(newText), node);
                    }
                }
            }
        }
    }
}

makeItAwesomer();

【问题讨论】：

不确定，但您不能监听网络流量stackoverflow.com/questions/6831916/…，然后每次都运行您的函数 - 显然会提供一些误报，但资源占用量应该更少。
1) 要检测更改，您可以使用 MutationObserver。 2) 要替换文本，最好使用 TreeWalker API，如 here 或 here 所示。

标签： javascript google-chrome-extension dom-events infinite-scroll

【解决方案1】：

您可以使用内置的 MutationObserver 来检测 DOM 何时发生更改，甚至可以自定义它以仅检测 DOM 结构的更改（例如在无限滚动页面上添加新节点）并忽略其他更改（例如随着属性的变化，有时只需将鼠标悬停在某物上就会发生这种情况）。你可以有这样的东西：

const targetNode = document.body;

// Options for the observer (which mutations to observe)
// Set attributes to false if you do not care if existing nodes have changed,
//  otherwise set it true. 
const config = { attributes: false, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    makeItAwesomer();
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

这可能适用于您现在编写的代码，只要makeItAwesomer() 正确检测到哪些文本已被修改（如果它与 onScroll 事件一起使用则应该这样做）。

但是，为了提高效率，如果您重新编写 makeItAwesomer() 函数以获取要更改的节点的参数，您可以修改回调以使其仅更新新加载的节点。所以callback 会更像：

const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        makeItAwesomer(mutation);
    }
};

Here's the MDN Web docs on MutationObserver 以帮助更好地了解其工作原理。

【讨论】：