内容脚本中的页面变量

Question

有没有办法从谷歌Chrome内容脚本中检索页面的javascript变量？

Answer 1

如果你真的需要,你可以<script>在页面的DOM中插入一个元素; <script>将执行元素内的代码,并且该代码可以访问窗口范围内的JavaScript变量.然后,您可以使用data-属性和触发自定义事件将它们传回内容脚本.

听起来很尴尬？为什么是,它是,并且故意是因为serg引用的文档中的所有原因.但如果你真的真的需要这样做,那就可以做到.有关详细信息,请参阅此处和此处.还有祝你好运!

Answer 2

我创建了一个小帮手方法,玩得开心:)

检索窗口的变量"lannister","always","pays","his","debts",执行以下命令:

var windowVariables = retrieveWindowVariables(["lannister", "always", "pays", "his", "debts"]);
console.log(windowVariables.lannister);
console.log(windowVariables.always);

我的代码:

function retrieveWindowVariables(variables) {
    var ret = {};

    var scriptContent = "";
    for (var i = 0; i < variables.length; i++) {
        var currVariable = variables[i];
        scriptContent += "if (typeof " + currVariable + " !== 'undefined') $('body').attr('tmp_" + currVariable + "', " + currVariable + ");\n"
    }

    var script = document.createElement('script');
    script.id = 'tmpScript';
    script.appendChild(document.createTextNode(scriptContent));
    (document.body || document.head || document.documentElement).appendChild(script);

    for (var i = 0; i < variables.length; i++) {
        var currVariable = variables[i];
        ret[currVariable] = $("body").attr("tmp_" + currVariable);
        $("body").removeAttr("tmp_" + currVariable);
    }

    $("#tmpScript").remove();

    return ret;
}

请注意我使用jQuery ..您可以轻松地使用本机js "removeAttribute"和"removeChild".

Answer 3

使用Liran的解决方案,我正在添加一些修复Objects,这是正确的解决方案:

function retrieveWindowVariables(variables) {
    var ret = {};

    var scriptContent = "";
    for (var i = 0; i < variables.length; i++) {
        var currVariable = variables[i];
        scriptContent += "if (typeof " + currVariable + " !== 'undefined') $('body').attr('tmp_" + currVariable + "', JSON.stringify(" + currVariable + "));\n"
    }

    var script = document.createElement('script');
    script.id = 'tmpScript';
    script.appendChild(document.createTextNode(scriptContent));
    (document.body || document.head || document.documentElement).appendChild(script);

    for (var i = 0; i < variables.length; i++) {
        var currVariable = variables[i];
        ret[currVariable] = $.parseJSON($("body").attr("tmp_" + currVariable));
        $("body").removeAttr("tmp_" + currVariable);
    }

     $("#tmpScript").remove();

    return ret;
}

Answer 4

Chrome 的文档为您提供了一个很好的起点：https : //developer.chrome.com/extensions/content_scripts#host-page-communication

此方法允许您将全局页面变量提取到内容脚本中。它还使用一个想法来只接受您在握手时识别的传入消息。你也可以只Math.random()用于握手，但我玩得很开心。

解释

1. 此方法创建一个脚本标记
2. 它将函数字符串化propagateVariable并将当前的 handShake 和目标变量名称传递到字符串中以进行保存，因为函数将无法访问我们的内容脚本范围。
3. 然后它将该脚本标记注入页面。
4. 然后我们在我们的内容脚本中创建一个监听器，等待从页面返回我们所追求的变量。
5. 到目前为止，注入的脚本已经命中页面。
6. 注入的代码包含在IIFE 中，因此它会自行运行，将数据推送到侦听器。
7. 可选：监听器确保它有正确的握手，瞧，我们可以信任数据的来源（它实际上并不安全，但在这种情况下它有助于创建一个标识符，这给了我们一定程度的信任）。

第1轮

v1.0

const globalToExtract = 'someVariableName';
const array = new Uint32Array(5);
const handShake = window.crypto.getRandomValues(array).toString();

function propagateVariable(handShake, variableName) {
  const message = { handShake };
  message[variableName] = window[variableName];
  window.postMessage(message, "*");
}

(function injectPropagator() {
  const script = `( ${propagateVariable.toString()} )('${handShake}', '${globalToExtract}');`
  const scriptTag = document.createElement('script');
  const scriptBody = document.createTextNode(script);
  
  scriptTag.id = 'chromeExtensionDataPropagator';
  scriptTag.appendChild(scriptBody);
  document.body.append(scriptTag);
})();

window.addEventListener("message", function({data}) {
  console.log("INCOMINGGGG!", data);
  // We only accept messages from ourselves
  if (data.handShake != handShake) return;

  console.log("Content script received: ", data);
}, false);

v1.1 承诺！

function extractGlobal(variableName) {

  const array = new Uint32Array(5);
  const handShake = window.crypto.getRandomValues(array).toString();

  function propagateVariable(handShake, variableName) {
    const message = { handShake };
    message[variableName] = window[variableName];
    window.postMessage(message, "*");
  }

  (function injectPropagator() {
    const script = `( ${propagateVariable.toString()} )('${handShake}', '${variableName}');`
    const scriptTag = document.createElement('script');
    const scriptBody = document.createTextNode(script);

    scriptTag.id = 'chromeExtensionDataPropagator';
    scriptTag.appendChild(scriptBody);
    document.body.append(scriptTag);
  })();

  return new Promise(resolve => {
    window.addEventListener("message", function({data}) {
      // We only accept messages from ourselves
      if (data.handShake != handShake) return;
      resolve(data);
    }, false);
  });
}

extractGlobal('someVariableName').then(data => {
  // Do Work Here
});

第 2 轮 - 课堂和承诺

v2.0

如果使用 es 模块，我建议将类放入自己的文件中并将其导出为默认值。然后它就变成了：

ExtractPageVariable('someGlobalPageVariable').data.then(pageVar => {
  // Do work here 
});

ExtractPageVariable('someGlobalPageVariable').data.then(pageVar => {
  // Do work here 
});

Answer 5

正如其他答案中部分解释的那样，页面中的 JS 变量与 Chrome 扩展内容脚本隔离。通常，没有办法访问它们。

但是，如果您在页面中注入 JavaScript 标记，您将可以访问那里定义的任何变量。

我使用实用程序函数将脚本注入页面中：

/**
 * inject - Inject some javascript in order to expose JS variables to our content JavaScript
 * @param {string} source - the JS source code to execute
 * Example: inject('(' + myFunction.toString() + ')()');
 */
function inject(source) {
  const j = document.createElement('script'),
    f = document.getElementsByTagName('script')[0];
  j.textContent = source;
  f.parentNode.insertBefore(j, f);
  f.parentNode.removeChild(j);
}

然后你可以这样做：

function getJSvar(whichVar) {
   document.body.setAttribute('data-'+whichVar,whichVar);
}
inject('(' + getJSvar.toString() + ')("somePageVariable")');

var pageVar = document.body.getAttribute('data-somePageVariable');

请注意，如果变量是复杂的数据类型（对象、数组...），则需要将值作为 JSON 字符串存储在 getJSvar() 中，并通过 JSON.parse 将其返回到内容脚本中。