chrome extension using a content script to access the `window` object

.manifest

{
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["inject.js"],
      "all_frames": true
    }
  ],
  "web_accessible_resources": [
    "content.js"
  ]
}

content.js

console.log(window);

inject.js

/**
 * injectScript - Inject internal script to available access to the `window`
 *
 * @param  {type} file_path Local path of the internal script.
 * @param  {type} tag The tag as string, where the script will be append (default: 'body').
 * @see    {@link http://stackoverflow.com/questions/20499994/access-window-variable-from-content-script}
 */
function injectScript(file_path, tag) {
    var node = document.getElementsByTagName(tag)[0];
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', file_path);
    node.appendChild(script);
}
injectScript(chrome.extension.getURL('content.js'), 'body');

How can I return one of the window variable (a complex JSON object) to content script. I am using v3.

How can I return one of the window variable (a complex JSON object) to content script. I am using v3.

+1, I also wanna know

Use window.postMessage and window.addEventListener

Use window.postMessage and window.addEventListener

could you elaborate?

manifest.json

  "content_scripts": [
    {
      "js": [
        "content-script.js"
      ]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "web_accessible_resources.js"
      ]
    }
  ],

web_accessible_resources.js

window.postMessage({ from: 'web_accessible_resources.js', data: window["hoge"] })

content-script.js

const handleFromWeb = async (event) => {
    if (event.data.from) {
        const data = event.data.data;
        console.log(`process from ${event.data.from}`);
        console.log(data);
    }
};
window.addEventListener('message', handleFromWeb);

※ Refer to my repo

Nice!

If anyone is still looking.

Manifest.js

"content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["js/inject.js"]
        }
],
"web_accessible_resources": [{ 
        "resources": ["js/*"],
        "matches": ["<all_urls>"]

}],

using "js/*" for all files inside the js directory.

inject.js

function injectScript(file_path, tag) {
    var node = document.getElementsByTagName(tag)[0];
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', file_path);
    node.appendChild(script);
    console.log("injected")
}

injectScript(chrome.runtime.getURL('!READBELOW!'), 'body');

When using injectingScript, pass file dir (if you have one) / file name
example: js/main.js

can't read data still

The world can be set to MAIN so the script shares the same ExecutionWorld. Example:

"content_scripts": [
        {
            "matches": ["https://*.domain.com/*"],
            "js": ["content.js"],
            "world": "MAIN"
        }
 ]

Thanks, @thecrazybob. You posted this just in time!

Too bad I didn't see it before! I wanted to retrieve a token from the window an authorization token bearer object.

I used chrome.webRequest.onBeforeSendHeaders.addListener(handler, requestFilter, extraInfoSpec); to intercept the token and send it with sendMessage from background.js and content.js it works perfectly and it's transparent ;)

From background.js

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {

    if(message==="give_me_headers"){
        sendResponse(global_header_for_fetch);
    });
[...]

let global_header_for_fetch=[]; // global 

header_for_fetch = {};
            for (i = 0; i < requestHeaders.length; i++) {
                header_for_fetch[requestHeaders[i].name] = requestHeaders[i].value;
            }

            global_header_for_fetch=header_for_fetch;

[...]

from content.js

chrome.runtime.sendMessage('give_me_headers',function(response){
               headers_for_fetch=new Headers(response);
});

If anyone is still looking. It's work well.

mainfest.json v3

 "content_scripts": [
    {
      "matches": ["https://www.youtube.com/watch*"],
      "js": ["js/vendor.js", "js/content_script.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["js/vendor.js", "js/web_accessible_resources.js"],
      "matches": ["<all_urls>"]
    }
  ],

content_script.js

function injectScript(file_path, tag) {
  var node = document.getElementsByTagName(tag)[0];
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', file_path);
  node.appendChild(script);
}
injectScript(chrome.runtime.getURL('js/web_accessible_resources.js'), 'body');

var port = chrome.runtime.connect();

window.addEventListener("message", (event) => {
  // We only accept messages from ourselves
  if (event.source !== window) {
    return;
  }

  if (event.data.type && (event.data.type === "FROM_PAGE")) {
    console.log("Content script received: " + event.data.text);
    port.postMessage(event.data.text);
  }
}, false);

web_accessible_resources.js

console.log(window.xxx)
window.postMessage({type : "FROM_PAGE", text : JSON.stringify(window.xxx)}, "*");

I hope this will help you. Good luck!

@thecrazybob Thank you so much. I have spent hours trying to get to the (same) global window object. This comment is underrated and should be quicker to find. Have a nice day!

@thecrazybob you saved the day! Cheers 🥂

Unfortunately content scripts don't work for isolated-app: protocol.

Thanks for the info share here. Found out executeScript also does the trick.