Repeatedly Grab DOM in Chrome Extension

Question

I'm trying to teach myself how to write Chrome extensions and ran into a snag when I realized that my jQuery was breaking because it was getting information from the extension page itself and not the tab's current page like I had expected.

Quick summary, my sample extension will refresh the page every x seconds, look at the contents/DOM, and then do some stuff with it. The first and last parts are fine, but getting the DOM from the page that I'm on has proven very difficult, and the documentation hasn't been terribly helpful for me.

You can see the code that I have so far at these links:

Current manifest

Current js script

Current popup.html

If I want to have the ability to grab the DOM on each cycle of my setInterval call, what more needs to be done? I know that, for example, I'll need to have a content script. But do I also need to specify a background page in my manifest? Where do I need to call the content script within my extension? What's the easiest/best way to have it communicate with my current js file on each reload? Will my content script also be expecting me to use jQuery?

I know that these questions are basic and will seem trivial to me in retrospect, but they've really been a headache trying to explore completely on my own. Thanks in advance.

Answer 1

In order to access the web-pages DOM you'll need to programmatically inject some code into it (using chrome.tabs.executeScript()).

That said, although it is possible to grab the DOM as a string, pass it back to your popup, load it into a new element and look for what ever you want, this is a really bad approach (for various reasons).
The best option (in terms of efficiency and accuracy) is to do the processing in web-page itself and then pass just the results back to the popup. Note that in order to be able to inject code into a web-page, you have to include the corresponding host match pattern in your permissions property in manifest.

What I describe above can be achieved like this:

editorMarket.js

var refresherID = 0;
var currentID = 0;

$(document).ready(function(){
    $('.start-button').click(function(){
        oldGroupedHTML = null;
        oldIndividualHTML = null;

        chrome.tabs.query({ active: true }, function(tabs) {
            if (tabs.length === 0) {
                return;
            }

            currentID = tabs[0].id;
            refresherID = setInterval(function() {
                chrome.tabs.reload(currentID, { bypassCache: true }, function() {
                    chrome.tabs.executeScript(currentID, {
                        file:      'content.js',
                        runAt:     'document_idle',
                        allFrames: false
                    }, function(results) {
                        if (chrome.runtime.lastError) {
                            alert('ERROR:\n' + chrome.runtime.lastError.message);
                            return;
                        } else if (results.length === 0) {
                            alert('ERROR: No results !');
                            return;
                        }

                        var nIndyJobs  = results[0].nIndyJobs;
                        var nGroupJobs = results[0].nGroupJobs;
                        $('.lt').text('Indy: ' + nIndyJobs + '; '
                                      + 'Grouped: ' + nGroupJobs);
                    });
                });
            }, 5000);
        });
    });

    $('.stop-button').click(function(){
        clearInterval(refresherID);
    });
});

content.js:

(function() {
    function getNumberOfIndividualJobs() {...}
    function getNumberOfGroupedJobs() {...}

    function comparator(grouped, individual) {
        var IndyJobs = getNumberOfIndividualJobs();
        var GroupJobs = getNumberOfGroupedJobs();

        nIndyJobs = IndyJobs[1];
        nGroupJobs = GroupJobs[1];
        console.log(GroupJobs);

        return {
            nIndyJobs: nIndyJobs, 
            nGroupJobs: nGroupJobs
        };
    }

    var currentGroupedHTML = $(".grouped_jobs").html();
    var currentIndividualHTML = $(".individual_jobs").html();
    var result = comparator(currentGroupedHTML, currentIndividualHTML);
    return result;
})();