Question

I’m using JSONP in a google chrome extension.
In order to make it work, i had to add

chrome.extension.onRequest.addListener(onRequest);

and then make the request like this:

var jsonpURL;
$(document).ready(function(){
   /* i make the "someurl" here from a div's content */
   jsonpURL="someurl";
   chrome.extension.sendRequest({action:'getJSON',url:jsonpURL});
});

in the listener i’d like to hide some div on the page

function onRequest(request, sender, callback) {
    if (request.action == 'getJSON') {
        $.getJSON(request.url, function(data){
                // HIDE SOME DIV
        });
    }    
}

the question:

how can i reach the original page’s content in the onRequest function? or if i cant at all, how can i hide some divs depending on the result of request?
i tried jquery selectors and figured out that i reach the bg.htlm, and not the original page.

Answer 1

You need to add a content script to page you’d like to modify after JSONP request returns. This script will be able to modify the DOM of the page it was injected to. After content script is in place you can communicate between background page and content script using messages. So basically, what you need to do is to send a message ‘ok jsonp retured!’ whenever background event listener onRequest is fired. After content script receives this message it can modify the DOM.

Even simpler option (but more limited) is to use a Programmatic injection of javascript to some page.