从 Web 可访问 Chrome 扩展程序访问外部 API答案

【问题标题】：Accessing an External API from a Web Accessible Chrome Extension从 Web 可访问 Chrome 扩展程序访问外部 API
【发布时间】：2014-08-19 05:57:30
【问题描述】：

我正在构建一个 Chrome 扩展程序，它可以让你在 Facebook 帖子中添加一堆新的反应。你可以在这里看到它的第一个版本：http://reactions.us/

我现在处理它的方式有点不雅。当用户添加“反应”时，我将添加自定义表情作为评论，然后对其进行解析，从 dom 中删除原始评论，并将相应的“反应”添加到帖子中。

这是我想做的事

我想联系外部 api，例如 http://api.reactions.us，以便设置和获取某个故事的反应。为了做到这一点，我（认为）我需要向页面添加一个 ajax 调用。但是，当我将 ajax 调用添加到通过“content_scripts”中的 init 脚本加载到页面上的“web_accessible_resources”脚本时，我收到此错误：

Refused to connect to 'http://reactions.us/getReactions?id=111' because it violates the following Content Security Policy directive: "connect-src https://*.facebook.com http://*.facebook.com https://*.fbcdn.net http://*.fbcdn.net *.facebook.net *.spotilocal.com:* https://*.akamaihd.net ws://*.facebook.com:* http://*.akamaihd.net https://fb.scanandcleanlocal.com:* *.atlassolutions.com http://attachment.fbsbx.com https://attachment.fbsbx.com".

任何帮助将不胜感激。也许有一种方法可以在内容脚本和网络可访问资源之间传递消息？

【问题讨论】：

标签： google-chrome google-chrome-extension

【解决方案1】：

我找到了答案。我刚开始的时候就听从了这篇文章的建议：Insert code into the page context using a content script

如果您不需要访问任何 chrome API 函数，它建议将您的脚本直接注入页面，这正是我所做的，因为我以前不需要它们。

但是您可以仅使用内容脚本来做几乎相同的事情（访问和修改 dom，现在甚至发出 ajax 请求）。

这篇文章在讨论使用内容脚本的跨域 XMLHttpRequest 时很有帮助：Cross-domain XMLHttpRequest using background pages

【讨论】：

注入脚本的唯一原因是如果您需要访问页面上下文中的 JavaScript 对象。如果您不需要此功能，那么您应该只使用内容脚本。即使您需要在页面中注入，您仍然可以设置消息通道（通过window.postMessage，或通过MessageChannel 对象）来在内容脚本和页面之间进行通信。