Passing object from injected page script to content script

Question

I'm writing a chrome extension and I'm struggling to pass an object back from the main page to the content script. I can't seem to access the window's variables.

Content script

//STORE DATA TO CHROME STORAGE ON EVENT
//create hidden input
var hiddenInput = document.createElement("input");
hiddenInput.setAttribute("type", "text");
hiddenInput.setAttribute("id", "__HIDDEN__RESULT__");
//add input to page
var currentItem = document.body.appendChild(hiddenInput);
//event to be fired on click
currentItem.onclick = function() {
    //get the global variable window.listOfCourses and stick it in storage
    chrome.storage.local.set({'dataVault' : window.listOfCourses});
};

//inject script into page
var s = document.createElement("script");
s.src = chrome.extension.getURL("gradebook.js");
s.onload = function() {this.parentNode.removeChild(this);};
(document.head||document.documentElement).appendChild(s);

Injected page script

function processData()
{
    window.listOfCourses = [];

    for (i=0; i < window.completedData.length; i++)
    {
        //get data and add to window.listOfCourses
    }
    var myElement = document.getElementById("__HIDDEN__RESULT__")
    myElement.click();
}

The injected script pulls information from a page, sticks it in an object set as global variable, then finally it fires the onclick event for the input.

All of this works. However, when the click event fires and runs currentItem.onclick() and tries to access window.listOfCourses, it doesn't see the variable. I'm confused why I'm not able to see my global variables anymore.

Community · Accepted Answer · 2017-05-23 12:26:18Z

The global variables of a content script and a page-level injected script are isolated.

Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.

Emphasis mine.

To pass the data to your content script, you don't have to employ extra DOM elements. You just need custom DOM events.

// Content script
// Listen for the event
window.addEventListener("FromPage", function(evt) {
  /* message is in evt.detail */
}, false);

// Page context
var message = {/* whatever */};
var event = new CustomEvent("FromPage", {detail: message});
window.dispatchEvent(event);

See this answer for far more details.

kofifus · Accepted Answer · 2017-08-11 00:29:08Z

-1

Above answer may work but I don't think it is the correct way ...

First:

If you already published your extension, get the application key and put it into your manifest "key" as described here:

install Chrome Extension Source Viewer
CRX -> view extension source -> enter published application URL -> enter
open developer tools (F12) -> go to console
copy the "key" atring from the console into your local manifest.json:

"key": "MIIBIjANBgkqhkiG9w...RwIDAQAB",

This will ensure your local and published extension have the same extensionId

Second:

load your local extension
find out your extensionId by going to chrome://extensions and looking for ID under your extension title

Third:

in your background script (ie background.js) listen for msgs like this:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.name === 'msg1') {
      alert(message.key1);
   }
});

in your content script (ie contentScript.js) send msgs like this:

chrome.runtime.sendMessage(extensionId, { name: 'msg1', key1: 'value1'}, undefined, (response) => {});

(replace extensionId with the one you got in the second step)

edited Aug 11, 2017 at 0:29

answered Aug 11, 2017 at 0:21

kofifus

19.7k23 gold badges120 silver badges192 bronze badges

1 Comment

S.Serpooshan Over a year ago

the question is about how to pass data between the [web page] and [content script] not the background worker!

Collectives™ on Stack Overflow

Passing object from injected page script to content script

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related