javascript - 在 CrossRider 的 appAPI.ready() 函数中创建的全局变量不可用于页面？

Question

我正在尝试使用 CrossRider 创建 Chrome 扩展程序，但正在努力解决如何创建全局变量的问题。

我的扩展本质上是在单击按钮时动态附加一些 JavaScript 文件到页面，并且我还需要它来创建一个全局变量并设置一些属性。

我尝试了以下方法:

appAPI.ready(function($) {
    console.log('inside crossrider extension ready()');
    window.foobar = 'barfoo';
    return;
});

当我刷新页面时，消息inside crossrider extension ready()被打印到控制台，所以我知道扩展已加载并正在工作，但是当我尝试执行window时控制台中的 .foobar 或 foobar 会抛出错误，指出它未定义。

这是我第一次创建扩展，所以我在这里缺少什么？为什么我在 CrossRider 的 appAPI.ready() 函数内部创建的全局变量在其外部不可用？

Answer 1

我找不到重复的目标，所以我会解释发生了什么。

我不知道 Crossrider 术语，但是当 Chrome 扩展程序在页面中执行代码时，这称为 Content Script .

但是，代码不会在与页面本身相同的上下文中执行。它的名字叫an isolated world除其他外，还意味着 window对象不共享。

Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.

因此，如果要设置页面可访问的变量，则需要在页面上下文中设置它。如何？ There are many ways ，但它们都相当于插入 <script>元素插入页面。

var script = document.createElement('script');
script.textContent = "window.foobar = 'barfoo';";
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

所有这些都假设您无法控制相关页面。如果这样做，还有其他方式来传达页面，因为 DOM 是共享的。例如，您可以 raise a custom DOM event如果页面监听它。