How to access page variables from Chrome extension background script

Question

With a content script you can inject a script tag into the DOM in order to access variables in the original page (as explained in this question).

I want to avoid injecting my code into every page and instead only do that when the user clicks on the extension icon.

When I tried using the same code as for the content script the values were undefined, although the script was inserted correctly.

Is this possible? Otherwise is using a content script and communicating with it the preferred solution?

Here is the code I'm using:

var scr = document.createElement("script");
scr.type="text/javascript";
scr.innerHTML = "setInterval('console.log(window.testVar)', 1000)"
document.body.appendChild(scr)

Manifest excerpt:

 "permissions": [
    "tabs",
    "http://*/*", "https://*/*"
  ],
  "background": {
    "scripts": ["inject.js"]
  },

Please expand your question showing your manifest file and the rest of your code. How do you know that "the script was inserted correctly"? — rsanchez, Sep 10 '13 at 11:40
@rsanchez Have added the relevant section of the manifest. By "was inserted correctly" I mean that the DOM node was inserted as I would expect, and the log output is printed periodically. The problem is that the value of `window.testVar` is undefined if I run inject.js from a background script. — Matt Zeunert, Sep 10 '13 at 20:34

score 6 · Answer 1 · answered Sep 10 '13 at 20:36

6

Nope. That's not possible. You may inject a script, but it only have an access to DOM and it could make DOM manipulations. It can not read javascript variables or execute functions in the context of the current page. Your javascript code is run in a sandbox and you are restricted only to the DOM elements.

answered Sep 10 '13 at 20:36

Krasimir

13,306
3
40
55

It works with a content script, so is that the way to go here? – Matt Zeunert Sep 10 '13 at 20:43
2

What you mean it works with a content script. Yes, you may inject your javascript, but it can not read variables defined in the page. You have an access only to the current page's DOM tree. – Krasimir Sep 10 '13 at 20:45
2

I tried it and it works. The question I linked to also says 'the code inside your – Matt Zeunert Sep 10 '13 at 20:53
Did you read the second answer. Last time when I tried to do this I failed and I'm willing to agree with Chrome – Krasimir Sep 10 '13 at 21:03

score 4 · Accepted Answer · answered Sep 10 '13 at 20:59

You can create a new background script with the following code:

chrome.browserAction.onClicked.addListener( function() {
  chrome.tabs.executeScript( { file: 'inject.js' } );
});

Your inject.js should stay as part of the extension, but you don't need to mention it in the manifest. This way, it will be run as a content script each time you press the extension icon. You didn't include the part of the manifest where you define the browserAction, but you just need to not specify a default_popup.

Thanks that works. I now create the script element that contains the code accessing the page variables in the inject.js. — Matt Zeunert, Sep 11 '13 at 20:34

score 3 · Answer 3 · edited Nov 28 '17 at 22:44

You can utilize a background script to execute JavaScript within the context of the page, however, your JavaScript is executed in an isolated environment from the JavaScript that is loaded from within the page.

Consider the following:

In page.html:

<button id="myButton" onclick="console.log('Message from within the page');" />

In background script:

chrome.tabs.executeScript({
  code: '$("#myButton").click(function() { console.log("Message from background script."); });'
});

Now, if you click the button within the page, you will find both log messages in the console window. The JavaScript contexts are isolated from each other, with the notable exceptions of messaging via postMessage and through the shared DOM.

How to access page variables from Chrome extension background script

3 Answers3