Question

我正在尝试测试我的网站，但是在控制台中测试需要太多时间。因此，我想添加一个chrome扩展名使其变得简单。

但是我在将变量用于chrome扩展时遇到了问题。这里是总结测试代码以对其进行解释。

index.html ：这是一个名为foo的变量

<html>
  <head>
    <script>
      var foo=23;
    </script>
  </head>
  <body></body>
</html>

manifest.json ：我做了一个chrome扩展程序来执行js.js

{
  "manifest_version": 2,

  "name": "test2",
  "description": "Just a test",
  "version": "1.0",

  "permissions": [ "activeTab" ],
  "content_scripts": [
    {
      "matches": [ "file://*" ],
      "run_at": "document_end",
      "js": [ "js.js" ]
    }
  ]
}

js.js ：这将使一个按钮警告foo

//Make a button on body
var button = document.createElement("button");
button.id = 'button';
button.style = 'font-size:5em';
button.textContent = 'button';
var body = document.getElementsByTagName('body')[0];
body.insertBefore(button, body.children[0]);

//Add onclick Listener to the button
document.getElementById('button').onclick = function () {
    alert(foo);
};

我认为此按钮应显示foo（23），但这会在控制台上返回错误。

未捕获的ReferenceError：未定义foo 在HTMLButtonElement.document.getElementById.onclick（js.js：9）

我对此进行了一段时间的故障排除，然后发现了this。

here是我在Chrome扩展方面的测试。发生相同的错误。

经过长时间的研究，我意识到这种上下文适用于内部iframe。并通过使用这样的父项：

parent.foo

我可以让iframe访问它。但是使用chrome扩展程序，它仍然不起作用。

所以，这是一个问题：Chrome扩展程序如何访问index.html（顶部上下文）中的变量？

chrome扩展如何在顶级上下文中访问变量？

0 个答案: