How to get window variable from script tag in javascript

Question

I need to get the window.configData, variable that is inside a script tag. There are multiple script tags in my HTML code. But I need to get only the script tag that contains the window.configData variable. I know this can be done usingdocument.scripts / document.getElementsByTagName('script'), and searching for required variable.

I need to get this element in a single line, so as to pass it as variable to the content script in chrome extension. Below is the code of my content script.

function getPageDetails(jsonValueToFind, callback) { 
chrome.tabs.executeScript({code:
            "document.defaultView.configData"
        }, function(result) {
    var value = result[0];
    chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
        callback({
            url: tabs[0].url,
            title: tabs[0].title,
            jsonValue: value
        });
    });
}); 

}

I need to pass this variable to the code section of content script. Can anybody suggest me how to acheive this

Answer 1

Parsing source code of the page to dig out variables from the window of the page is probably not a good idea. What if it's not a simple assignment? What if a <script> tag self-deletes?

As you probably noticed already, if you try to evaluate window.configData in the content script's context, it will return undefined.

The reason for this is the isolated world concept: the target page will have 2 independent JS contexts attached, one for the page (that has configData) and your content script's context. window objects are not the same.

To access the page's object, you need to execute your code in the page's context. It's possible if you inject a <script> tag with your code. Then, you can pass the data to your content script or write it in the DOM somewhere where it's accessible by the content script.

+-----------------+ -(executeScript)-> +----------------+ --(<script>)---> +-------------+
| Background page |                    | Content script |                  | Page script |
+-----------------+ <--(sendMessage)-- +----------------+ <-(CustomEvent)- +-------------+

Since data collection is going to be asynchronous, you can't rely on return value of executeScript - you'll need to pass a message back.

Because of that, maybe even better to include a content script that always loads (through manifest) and collects data preemptively, and then the background page can query it:

                                       +----------------+ --(<script>)---> +-------------+
                                       |                |                  | Page script |
                                       | Content script | <-(CustomEvent)- +-------------+
                                       | (in manifest)  |
+-----------------+ --(sendMessage)--> |                |
| Background page |                    |                |
+-----------------+ <--(sendResponse)- +----------------+

I answered about it in detail before.

Answer 2

Just complement the script, where your window.configData is implement, with an onload handler and id.

var script document.getelementbyid("scriptid");
script.onload= function(){ window.configData;  }