javascript - Can the window object be modified from a Chrome extension?

Question

I would like to make a Chrome extension that provides a new object inside window. When a web page is viewed in a browser with the extension loaded, I would like window.mything to be available via Javascript. The window.mything object will have some functions that I will define in the extension, and these functions should be callable from console.log or any Javascript file when the page is viewed in a browser with the extension enabled.

I was able to successfully inject a Javascript file into the page by using a Content Script:

var s = document.createElement("script"); 
s.src = chrome.extension.getURL("mything.js");
document.getElementsByTagName("head")[0].appendChild(s);

mything.js looks like this:

window.mything = {thing: true};
console.log(window);

Whenever a page loads, I see the entire window object as I expect it to be in the console. However, I can't interact with the window.mything object from the console. It seems at if the injected script hasn't really modified the global window object.

How can I modify the global window object from a Chrome extension?

Answer 1

You can't, not directly. From the content scripts documentation:

However, content scripts have some limitations. They cannot:

• Use chrome.* APIs (except for parts of chrome.extension)
• Use variables or functions defined by their extension's pages
• Use variables or functions defined by web pages or by other content scripts

(emphasis added)

The window object the content script sees is not the same window object that the page sees.

You can pass messages via the DOM, however, by using the window.postMessage method. Both your page and content script listen to the message event, and whenever you call window.postMessage from one of those places, the other will receive it. There's an example of this on the "Content Scripts" documentation page.

edit: You could potentially add some methods to the page by injecting a script from the content script. It still wouldn't be able to communicate back with the rest of the extension though, without using something like postMessage, but you could at least add some things to the page's window

var elt = document.createElement("script");
elt.innerHTML = "window.foo = {bar:function(){/*whatever*/}};"
document.head.appendChild(elt);