Chrome扩展弹出窗口中的谷歌图表？

Posted 2023-02-25

【中文标题】Chrome扩展弹出窗口中的谷歌图表？

【英文标题】：Google Chart in Chrome Extension Popup?

【发布时间】：2013-02-27 05:40:35

【问题描述】：

我想让我的 Chrome 扩展程序的弹出页面显示一个 Google 图表，其中显示有关用户阅读新闻习惯的信息。我注意到（特别是这里：Chrome extension doesn't work），这个问题是 Chrome 扩展不允许内联脚本，这使得包括使用 Google Chart 所需的 API 文件变得复杂。有没有解决的办法？有没有什么地方可以下载整个 API 以简单地包含在我的扩展中？

【问题讨论】：

这answer不够好吗？

我希望有更多细节，或者可能是替代方案。您会注意到我在原始帖子中链接到该主题，并且它没有提供太多答案 - 如果没有更多答案，我想知道。

也没有办法放松这个限制。对我来说似乎是一个明确的答案。

【参考方案1】：

原则上，扩展可以使用违反 CSP 的库。但是，这需要额外的箍跳：Sandboxing。

  "sandbox": 
    "pages": [
      "sandbox.html"
    ]
    "content_security_policy":
        "sandbox allow-scripts; script-src 'self' 'unsafe-eval' https://www.google.com/jsapi"
  ],

它是专门为解决这个问题而创建的。有关实施细节，请参阅"Using eval in Chrome Extensions. Safely." 指南。

您需要在普通脚本和沙箱之间传达结果，因为沙箱页面没有 Chrome API 访问权限。

【参考方案2】：

如果文档位于 Chrome 扩展程序的上下文中，则您不能使用 Google 图表，因为它违反了内联 javascript 规则。但是，您可以将 iframe 放入引用远程资源的扩展弹出窗口中。例如，如果以下 sn-p 在您的弹出窗口中：

<iframe src="https://mycoolextension.com/user/12345"></iframe>

然后您可以在地址https://mycoolextension.com/user/12345 上使用Google Charts 进行应用程序。如果您想将图表与扩展程序的数据集成，您需要将参数添加到图表 iframe 的地址，或者实施内容脚本以将值发送到 iframe。