Chrome extension - passing an object from a page to a script context

Question

I am writing a chrome extension and I am trying to pass an object back from the main page to the script context. I cannot access window variables.

ContextScript

//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); 

Script Entered

 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 script you enter retrieves information from the page, binds it to the object specified as a global variable, and then finally fires the onclick event for input.

It all works. However, when the click event fires and fires currentItem.onclick () and tries to access the .listOfCourses window, it does not see the variable. I am confused why I can no longer see my global variables.

Any help would be greatly appreciated!

Answer 1

The global variables of the contents of the script and the entered script at the page level .

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

Emphasis on mine.

To pass data into your content script, you do not need to use additional 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 more details.

Answer 2

The above answer may work, but I don't think this is the right way ...

At first:

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

• install View Chrome Extensions
• CRX -> view extension source -> enter the URL of the published application -> enter
• open developer tools (F12) → go to console

• copy the "key" from the console to the local manifest.json file:
  

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

This ensures that the local and published extensions have the same extension.

Second:

• download local extension
• find out about your extension by going to chrome://extensions and look for the identifier under the heading of your extension

Third:

in the background, a script (e.g. background.js) listens for msgs as follows:

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

in your content script (i.e. contentScript.js) sends the following messages:

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

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