javascript - 如何在 Chrome 插件中使用外部 ajax 响应

Question

我的网站中有一个现有文件 ajax,js，它发出 ajax 请求并使用该响应创建一个全局 JSON 对象 searchResult。现在我正在创建一个 Chrome 插件，它需要在其中包含此 JSON 对象。我有一个插件可视化的内容脚本。 plugin.js，我想将该对象包含在plugin.js 文件中。

当我尝试从plugin.js 中记录window.searchResult 时，它显示为未定义。

但是当我使用浏览器控制台时，它显示了预期的值。

请帮我解决这个问题。

Answer 1

问题

Chrome 内容脚本和页面自己的脚本位于 isolated worlds .

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.

您的代码可以在控制台中运行，因为默认情况下您是在页面上下文中执行它的。要查看扩展程序看到的内容，您需要 switch it .

解决方案1a

首先，通用解决方案(即使您不控制网页也可以使用)

有一种方法可以解决这个问题，即直接将一些代码注入(inject)到页面的“世界”(或者正确地称为上下文)中。

injecting the code之后，您的页面级脚本需要与内容脚本通信以传递数据。这是possible with custom DOM events (正如您所记得的，DOM 是共享的)。页面级脚本发送一个事件，其中包含事件详细信息中的数据。

或者，您可以将数据附加到某个 DOM 节点，例如不可见的 <div> .

解决方案 1b

既然您说过这是您的页面，那么您可以跳过注入(inject)页面步骤并在页面自己的代码中准备好监听器。

内容脚本发送自定义事件来请求数据，页面应答将数据传回，如 1a 中所述。

解决方案2

理论上，您甚至不需要内容脚本。

您可以使用 "externally_connectable" mechanism直接与页面对话。

请注意，页面必须发起对话。