javascript - Synchronously get Stored data from content scripts - Stack Overflow

admin管理员组

文章数量:1323023

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 responseinjects. 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?

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 responseinjects. 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?

• javascript
• jquery
• google-chrome
• google-chrome-extension

Share Improve this question Follow edited Jun 10, 2014 at 14:48 Mostafa Shahverdy asked Mar 28, 2013 at 4:33 Mostafa ShahverdyMostafa Shahverdy 2,72522 gold badges3131 silver badges5151 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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, e.g. 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!!

本文标签： javascriptSynchronously get Stored data from content scriptsStack Overflow