Access jQuery through Chrome Ext. Layers

Question

I have a particularly strange problem when developing Chrome extensions using jQuery. I have two “frames” in my extension, a pop-up page and a background page. Both of these pages included the jQuery library in them. Essentially, I would like to do this when the user clicks on the browser action icon, when the loading screen is displayed, when the background page collects data, and then sends it back to the pop-up page. I tried to do this when the popup page calls a function in the background screen, and then use the background page for the dom popup to access the data and display in the user interface. However, I notice that when you return the Window object from chrome.extension.getView (), for some reason it does not have access to the jQuery library. Any call to "$" encounters a "method not found" error. So what would be the best way to handle this?

Answer 1

I would do this using message parsing . Essentially, you add a listener function to your background page, similar to this: (slightly simplified example on the documentation page)

chrome.extension.onRequest.addListener( function(request, sender, sendResponse) { console.log("Received a request!"); if (request.message == "hello") sendResponse({message: "goodbye"}); }); 

The background page retrieves the information and returns it to the popup using the sendResponse function.

Then, in your popup menu, you implement something like this:

 chrome.extension.sendRequest({message: "hello"}, function(response) { console.log(response.message); }); 

Messages (parts of {message: "hello"} ) can be any JSON compatible object.