Get webpage function return value for Chrome extension

Question

I am making an Chrome extension and it needs to get some values from a webpage. The page has a script element with a function:

<script>D.setConst({"TIME":1444940082,"LANG":"En","ID":1463887,"DEV":false,"DEV_NAME":......

When I type in my browser console D.TIME, I get the time value. In that function there are many variables and I need few of them for my extension.

Steps which I have done: 1. manifest file has all the permissions, declared the content script. 2. have a popup.html window with a button which executes code from my content script:

function click(e) {
  chrome.tabs.executeScript(null,
      {code:'var btn = document.createElement("SCRIPT"); btn.innerHTML = "console.log(D.nonce.name);"; document.body.appendChild(btn);'},function(results){ console.log(results); } );

  //window.close();
}



document.addEventListener('DOMContentLoaded', function () {
  var divs = document.getElementById('message');
    divs.addEventListener('click', click);

});

As a result in my extension console I get a result [object], but no the value I need. I get the result in the browser console, but I can't get it for the extension.

I have tried to find a solution, but all I have found is how to inject a script in the DOM.

Please help.

Edited.

manifest file

{
  "name": "tesiting",
  "description": "generic",
  "version": "1.0",
  "permissions": [
   "https://www.example.lv/*",
   "https://*.example.*",
   "activeTab"

  ],


    "content_scripts": [
    {
      "matches": ["https://www.example.lv/*"],
      "js": ["testevent.js"]
    }
  ],

  "browser_action": {
  "default_icon": "icon.png",
    "default_title": "Mhmmm",
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

popup.html

<!doctype html>
<html>
<head>
</head>
<body>
<div id='message'>Geting code</div>
<script type="text/javascript" src="testevent.js"></script>
</body>
</html>

content script testevent.js

window.addEventListener("MyCustomEvent", function (e) {
  var check = e.detail.passback;
  console.log(check);
});


function click(b) {
  chrome.tabs.executeScript(null,
      {file: "eventer.js"});

}
document.addEventListener('DOMContentLoaded', function () {
  var divs = document.getElementById('message');
    divs.addEventListener('click', click);

});

eventer.js

var scr = document.createElement('script');
scr.textContent = '(' + function () { 
  var check = [console.log(D.nonce.name)]; //this is the function which I execute to get the desired values from it, right now it should get a Name.
  var event = document.createEvent("CustomEvent");  
  event.initCustomEvent("MyCustomEvent", true, true, {"passback":check});
  window.dispatchEvent(event); } + ')();';
(document.head || document.documentElement).appendChild(scr);
scr.parentNode.removeChild(scr);

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Only JSON-serializable objects (values like number, string, array, simple {...} object) can be passed into the callback, not a DOM element.
When typing in the console interactively the code runs in the context of the page, so the page variables are accessible. This is not the case with an extension's content script which runs in an isolated world.
Injecting a script into the page itself via <script> element is an asynchronous operation, which means that the content script returns immediately to executeScript's callback with a non-serializable value returned by the last statement (document.body.appendChild in the code).

The first usable value in the console log you see is from that inner <script>-injected code, not from the callback.

There are several solutions:

Force immediate execution of the inner injected code by abusing an inline event listener and triggering its event: Method 3 in Building a Chrome Extension - Inject code in a page using a Content script answer.
Send the value via postMessage and custom event in the page-injected code, receive it in the injected content script with window.addEventListener which then sends it into the extension via chrome.runtime.sendMessage, receive it in the popup script with chrome.runtime.onMessage.
- Chrome Extension - access document/page variable from extension
- Building a Chrome Extension - Inject code in a page using a Content script
Use "externally_connectable": Sending messages from web pages in the documentation. In short: explicitly allow the url of the page in manifest.json, send with chrome.runtime.sendMessage in the page-injected code, receive with chrome.runtime.onMessageExternal in the popup/background script).
There could be other examples/solutions findable with chrome extension access page variables

Thank you for the answer. I am aware of the methods, but I am not able to put the code together. Looking in [link](https://stackoverflow.com/questions/21731635/chrome-extension-access-document-page-variable-from-extension)method I still cant get the value from the event listener. — Edgars Mao, Oct 16 '15 at 13:54
I edited the original question. I can't figure out how to get the value to use it for the extension, for example, change the
Geting code
innerthtml with the value. — Edgars Mao, Oct 16 '15 at 15:06
Ugh this is wrong... The script you want to inject into the page scope (`eventer.js`) is NOT a **content script** but uhm... let's call it an injected page script. So your *content script* should create a ` — wOxxOm, Oct 16 '15 at 15:34

Get webpage function return value for Chrome extension

1 Answers1