showing several JS variables value in chrome extensions

Question

is it possible to get my website 2,3 js variables in an extensions i build so i will be able to see the info behind the site i build

the extension will help me devel

Answer 1

Seeing the variables of a given website (using Content Scripts) is possible. Just inject your own content script, and create an script tag that reads your variables. You cannot use those variables, or modify them on your extension due to some limitations of what Content script can do. You can read the following docs on Communication with the embedding page.

For example the following will read a JS variable in the webpage and transfer its contents to the background page so we can let our extension deal with it. You will notice in the background page inspector, that the variable is successfully passed:

content_script.js

// JS script injection, so that we can read the JS class 'InternalJSVariable'
var postFriendMap = function() {
  var textarea = document.getElementById('transfer-dom-area');
  textarea.value = JSON.stringify(InternalJSVariable);
};

// Create a dummy textarea DOM.
var textarea = document.createElement('textarea');
textarea.setAttribute('id', 'transfer-dom-area');
textarea.style.display = 'none';
document.body.appendChild(textarea);

// Start injecting the JS script.
var script = document.createElement('script');
script.appendChild(document.createTextNode('(' + postFriendMap + ')();'));
document.body.appendChild(script);

// Inform our world that we have received the friend map data.
chrome.extension.sendRequest({internalVariable: textarea.value});

// Clean up since we no longer need this.
document.body.removeChild(textarea);

background.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.internalVariable) {
    var internal_object = JSON.parse(request.internalVariable);
    console.log(internal_object );
  }
});