Question

Chrome内容脚本可以访问网页的元素。目前，我使用以下代码阅读段落标记之间的所有文字：

$(document).ready(function(){
    $("p").each(function(){
        console.log($(this).text() );
    });
})

代码将返回所有文本。但是，在Facebook等不断更新内容的页面中，不会记录之后引入的段落。

我在Facebook上注意到，只要我滚动到页面底部，就会加载包含名为LitestandMoreStoriesPagelet的附加文本的文档。有没有办法在扩展中实现这样的请求（或任何请求），然后调用javascript函数来记录文本？

我的第一次尝试让我看到了这个question，但我并不认为它与更改标签的时间相关，而不是在加载资源时。

Answer 1

尝试使用 MutationObserver 检测页面HTML的更改。您可以注册一个新的观察者，然后从更改的元素中读取新的p元素文本。更多信息：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 2

通过Steve B对MutationObserver的见解，我能够输入以下代码。大部分代码都是基于link启发的。我需要更改的唯一主要内容是观察者配置下的subtree: true（因为我想在所有级别上进行递归）。

// The node to be monitored
var target = $("body,html");

// Create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
    var newNodes = mutation.addedNodes; // DOM NodeList
    if( newNodes !== null ) { // If there are new nodes added
        console.log("TRIGGERED");
        var $nodes = $( newNodes ); // jQuery set
        $nodes.each(function() {
            var $node = $( this );
            var $paragraphs = $node.find("p");
            $paragraphs.each(function(){
                console.log($(this).text() );
            });
        });
    }
});
});  

// Configuration of the observer:
var config = { 
    attributes: true, 
    childList: true, 
    characterData: true,
    subtree: true 
};

console.log(target[0].childNodes);

// Pass in the target node, as well as the observer options
observer.observe(target[0], config);

每当请求资源时运行Chrome内容脚本

2 个答案: