Synchronously get Stored data from content scripts

Question

I am currently working on a chrome extension and source code is available on Github . The goal is to inject custom Javascript into webpages.

Currently I store each custom Javascript Inject in localStorage and call them from content scipts . I have set run_at to be at document_start .

I use this, to get stored injects from background script:

chrome.extension.sendMessage({method:"get_injects"},function(injects){
    for(index in injects){
        if(/^items\./.test(index)){
            itemJSON = injects[index];
            //if(window.location.host.toString().indexOf(itemJSON.url)){
            if(window.location.host.toString().match(itemJSON.url + '$')){
                var js = itemJSON.js.toString();
                eval(js);
            }
        }
    }
});

Problem

I want to run Inject scripts exactly before document loads. But using presented method, control will pass chrome.extension.sendMessage and wont wait to get response injects . So, eval(js); will be executed at the middle of page loading. How can I solve this, so that I will be able to inject before page loading?

Answer 1

In Chrome, each tab runs in its own process. The background page runs in the extension process which is different from the one of the tab you're hooking. So I'm afraid there can be no really synchronous solution.

Even using chrome.storage (which hasn't the origin limitation and thus doesn't need the background page) would be asynchronous.

But here's a solution that would work for most pages :

1. if the data you need is in the localStorage of the page, go to 6
2. remove everything from the page
3. do your asynchronous request for data
4. when you have the data, store it in the localStorage of the page (not the background one)
5. refresh the page with same URL
6. profit

Answer 2

There is a way to get an arbitrary amount of data synchronously from the background page to the current content script. You should avoid synchronously blocking code in your extension, so I will not provide sample code, to discourage copy-pasting this in production code.

The flow is:

1. Use synchronous XMLHttpRequest in the content script (to a fake URL) to initiate these steps.
2. In the background page, use the chrome.webRequest.onBeforeRequest event to intercept this request.
3. Synchronously get the data, eg from localStorage or a local variable on the background page, convert it to a blob then convert it to an URL using var url = URL.createObjectURL(new Blob([ 'data chunks here' ])); .
4. Use return {redirectUrl: url}; in the onBeforeRequest event to send the data back.
5. Make sure that you eventually use URL.revokeObjectURL(url); to free the resources used by the data.

And fnally, avoid synchronous, blocking code if possible!!