使用 Chrome 扩展内容脚本嵌入其他内容

Question

我正在开发一个 Chrome 扩展程序，它将向一组特定的页面添加内容。根据我的研究，听起来我想要的是一个content script，它将为相应的页面执行。我可以使用content_script.matches manifest.json 字段指定“适当的页面”。

但是，我遇到的问题是内容脚本在一个孤立的世界中运行，separate from the rest of your extension。

我如何设想我的扩展是一组UI pages，将通过内容脚本嵌入到适当的页面上。 background page 将包含用于构建 UI 页面内容的代码。背景页面以及扩展的 UI 页面需要访问各种 Chrome API（例如本地存储），以及能够发出跨域请求以检索其数据。但是，这似乎是不可能的，因为内容脚本在一个孤立的世界中运行，并且无法访问我需要的 Chrome API。

Message passing 允许内容脚本从后台页面发送和接收数据，但不允许您获取 UI 页面并将其嵌入到当前网页中。

当我能够制作jQuery AJAX request from my content script for an UI page 时，我最初认为我在这方面取得了一些进展，但这只会让我获得 HTML 文件本身。我的 UI 页面依赖于代码以编程方式构建内容——它不仅仅是一个静态 HTML 页面。并且“构建页面”JavaScript 代码依赖于内容脚本不可用的 Chrome API。因此，如果我只是尝试将我所有的 UI 页面和 JavaScript 资源设为web_accessible_resources，我可以将它们注入到页面中，但它们将无法运行。

这让我想到了我的问题：内容脚本如何下拉或嵌入可以在后台页面中调用代码的UI pages？

Answer 1

Tldr：您需要阅读有关在内容/背景之间发送消息的信息。它在文档和许多示例中。

Answer 2

据我所知，我希望的架构（如我的问题中所述）在 Chrome 扩展程序中是不可能的。 Chrome 的安全模型需要不同的方法。这对我有用。

• 制作您的模板、JavaScript 文件以及 UI 中的任何内容，web_accessible_resources。
• 使用您的内容脚本加载这些资源并在适当的时间/位置向用户显示。
• (Almost) 对chrome.* API 的任何调用都需要通过您的background page 或event page 完成。就我而言，“背景页面”严格来说是 JavaScript，没有 HTML。
• 您的内容脚本和 UI 可以将messages 发送到您的背景/事件页面。

此模型与 Web 应用程序的传统客户端/服务器架构没有什么不同。 “后台页面”就像您的服务器，您的内容脚本可以向“后台页面”发送“消息”（想想 HTTP 请求），就像它可能向您的服务器发送请求一样。

后台页面，就像服务器一样，可以访问内容脚本没有的资源，例如，后台页面可以使用更多的chrome APIs。

这种心理类比帮助我“重新设计”了我的应用程序，使其（到目前为止）在 Chrome 扩展程序安全模型中运行。我最初的想法更多是按照传统桌面应用程序的思路，整个应用程序可以做一些事情，比如发出跨域请求或写入文件系统。但是，Chrome 扩展程序和应用程序不能以这种方式工作。