在CrossRider内部创建的全局变量's的appAPI.ready(）函数对页面不可用

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

本文关键字：函数 ready appAPI 创建 内部 CrossRider 全局变量      更新时间：2024-06-20

我正在尝试使用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()函数中创建的全局变量在它之外不可用？

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

我不知道Crossrider的术语，但当Chrome扩展在页面中执行代码时，这被称为内容脚本。

但是，代码并不是在与页面本身相同的上下文中执行的。它被称为一个孤立的世界，这意味着window对象是不共享的。

内容脚本在一个称为孤立世界的特殊环境中执行。他们可以访问被注入页面的DOM，但不能访问页面创建的任何JavaScript变量或函数。它查看每个内容脚本，就好像在它运行的页面上没有其他JavaScript执行一样。反过来也是如此：在页面上运行的JavaScript无法调用任何函数或访问内容脚本定义的任何变量。

因此，如果要设置页面可访问的变量，则需要在页面上下文中进行设置。怎样有很多方法，但它们都相当于在页面中插入一个<script>元素。

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

所有这些都假设您无法控制所讨论的页面。若您这样做了，还有其他方法来传递页面，因为DOM是共享的。例如，如果页面侦听自定义DOM事件，则可以引发该事件。

相关文章：