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

Question

我正在使用Chrome扩展程序，该扩展程序会将内容添加到特定的一组页面中。根据我的研究，听起来我想要的是content script将为适当的页面执行。我可以指定适当的页面＆＃34;使用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页面。并且＃34;构建页面＆＃34; JavaScript代码依赖于内容脚本无法使用的Chrome API。所以，如果我只是尝试制作我的所有UI页面和JavaScript资源web_accessible_resources，我可以将它们注入页面但是它们无法运行。

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

Answer 1

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

Answer 2

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

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

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

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

这种心理类比帮助我以一种（到目前为止）在Chrome扩展安全模型中工作的方式“重新设计”我的应用程序。我原本一直在考虑更传统的桌面应用程序，整个应用程序可以执行诸如跨域请求或写入文件系统之类的操作。但是，Chrome扩展程序和应用程序无法以这种方式运行。