Running a Chrome Content Script whenever a resource is requested

Question

A Chrome content script is able to access the elements of a page. Currently, I'm using the following code to read all text in between paragraph tags:

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

The code will return all the text. However, in a page such as Facebook where the content is continually updated, the paragraphs that are brought in afterwards are not logged.

I noticed on Facebook, that a document containing the additional text named LitestandMoreStoriesPagelet is loaded whenever I scroll to the bottom of the page. Is there a way to realize within the extension that such a request (or any request for that matter) is being made, and then call a javascript function to log the text?

My first attempt led me to this question, but I don't think it's relevant as it pertains to when the tabs are changed, not when resources are loaded.

if you're trying to "detect" xmlHttpRequest's - [chrome.webRequest](https://developer.chrome.com/extensions/webRequest) would be the way to go - which is mentioned in the answer on the question you linked — Jaromanda X, Feb 14 '16 at 05:08
I believe you could also use the [.ajaxComplete()](http://api.jquery.com/ajaxcomplete/) jquery function. — mattdevio, Feb 14 '16 at 05:18
Please remove your edit and post your solution as an alternate answer; it's the best thing for StackOverflow's Q&A format. — Xan, Feb 15 '16 at 15:48

score 1 · Accepted Answer · answered Feb 14 '16 at 18:41

1

Try using a MutationObserver to detect changes to the page HTML. You could register a new observer and then read the new p-element texts from the changed elements. More info: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

answered Feb 14 '16 at 18:41

Steve B

212
1
8

Thanks for the idea! This was the easiest way. – Abundance Feb 14 '16 at 21:19

score 0 · Answer 2 · answered Feb 15 '16 at 20:16

With Steve B's insight about MutationObserver, I was able to type up the following code. Most of the code was inspired from this link. The only major thing that I needed to change was the subtree: true under the configurations in the observer (as I wanted to recurse over all levels).

// 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);

Running a Chrome Content Script whenever a resource is requested

2 Answers2