JS在脚本标签(谷歌扩展)中定义变量

Question

我有一个小问题。我想读取 DOM 中标签内定义的变量。

<script id="foo">
    var x = 1
</script>

我可以通过以下方式访问它：

var script = document.querySelector("#foo");

但那又如何？答案是肯定的

var x_value = script.x

或

var x_value = script.outerHTML.x

不行。那么我怎样才能得到x的值呢？

感谢您的帮助！

Answer 1

内容脚本在隔离环境中运行，因此它无法直接访问页面变量。

• 可以使用正则表达式提取文字数值：

  var scriptText = document.getElementById('foo').textContent;
  var x = parseFloat(scriptText.match(/var xs*=s*(-?(d*.)?d+(e-?d+)?)|$/)[1]);
  

• 可以从 script 元素访问任何 JSON 可识别类型的全局页面变量，因为它在页面上下文中运行：

  function getPageVariable(name) {
    return new Promise(resolve => {
      window.addEventListener(`${chrome.runtime.id}-variable`, e => {
        resolve(JSON.parse(e.detail));
      }, {once: true});
      var script = document.createElement('script');
      document.documentElement.appendChild(script).text = `
        window.dispatchEvent(new CustomEvent('${chrome.runtime.id}-variable', {
          detail: JSON.stringify(window.${name})
        }))`;
      script.remove();
    });
  }  
  

  用法：

  getPageVariable('x').then(x => {
    // do something with x
  });
  

  根据页面 CSP，可能需要不同的代码注入方法。

Answer 2

一旦你进入这个范围，你应该能够从任何你想要的地方访问你的变量......

<script id="foo">
    var x = 1
</script>
<div id="test">
</div>
<script>
document.getElementById("test").innerHTML = x;
</script>