在 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。

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

Global variable created inside CrossRider's appAPI.ready() function not available to page?

javascript

scope

google-chrome-extension

crossrider