在 Chrome 打包应用程序中通过 XHR 加载本地内容答案

【问题标题】：Loading local content through XHR in a Chrome packaged app在 Chrome 打包应用程序中通过 XHR 加载本地内容
【发布时间】：2013-04-05 07:44:38
【问题描述】：

我正在尝试加载使用 Backbone 构建的 Web 应用程序，它会提取本地存储的 JSON 和 HTML 模板文件。我想知道 Chrome 打包应用是否可以通过使用某种“get”/ajax 请求来加载这些文件？

目前我正在接受这个......

OPTIONS chrome-extension://fibpcbellfjkmapljkjdlpgencmekhco/templates/templates.html Cannot make any requests from null. jquery.min.js:2
XMLHttpRequest cannot load chrome-extension://fibpcbellfjkmapljkjdlpgencmekhco/templates/templates.html. Cannot make any requests from null.

我找不到任何有关如何执行此操作的真实信息，因此非常感谢您的帮助！

【问题讨论】：

为什么您的来源为空？如果您从打包应用程序中的标准窗口对应用程序内的文件执行 XHR，它可以工作。
好吧，我的来源似乎为空，因为我的应用程序有一个沙盒页面，它是一个 web 应用程序。这个 webapp 加载一个 xml 文件作为它的数据源。但这似乎不起作用。我将如何处理 XHR 请求？

标签： ajax google-chrome xmlhttprequest google-chrome-app

【解决方案1】：

您正在从沙盒页面发出请求，而沙盒页面的来源为空。

~~我已经在 Google Group 上发布了这个issue 问题。~~

~~除非 Chrome 决定更改沙盒策略，否则似乎唯一的解决方法是从非沙盒页面发出 XHR 请求，并使用 Chrome 的消息传递 API 将其提供给您的沙盒页面。~~

我不知道为什么这么难。

编辑：

Chrome 团队的 answer 将 CORS 标头更改为 *。

【讨论】：

我完全同意。出于这个原因，我实际上决定不使用 chrome 打包的应用程序。我搬到了 node-webkit，它为我的应用提供了更多选择。
Brackets shell 也是一个值得一看的选项。
括号壳真的很好。我也喜欢他们繁重的任务。可以向他们学习很多东西。

【解决方案2】：

我相信您的问题出在服务器端，而不是客户端。服务端需要给jQuery发送如下头部来处理响应：

Access-Control-Allow-Origin: *

然而，问题在于任何页面现在都可以加载该内容。知道扩展程序的 ID 后，您可以将该标头更改为：

Access-Control-Allow-Origin: chrome-extension://gmelhokjkebpmoejhcelmnopijabmobf/

对类似以下内容的简短测试表明这些是可行的：

<h1>Content Below</h1>
<div id="loadme"></div>
<script src="jquery-1.9.1.min.js"></script>
<script src="app.js"></script>

// app.js
$(document).ready(function() {
  $.get('http://localhost:8080/content.php', function(data) {
    $('#loadme').html(data);
  });
});

如果我没有添加 Access-Control-Allow-Origin 标头，这将失败并显示以下消息：

XMLHttpRequest cannot load http://localhost:8080/newhope/deleteme.php.
Origin chrome-extension://gmelhokjkebpmoejhcelgkfeijabmobf is not allowed by
Access-Control-Allow-Origin.

一旦我在 php 响应中添加了 Access-Control-Allow-Origin 标头，它就可以正常工作了。

同样，将其设置为 * 可能存在安全风险，因为任何地方的任何浏览器页面都可以内联加载它。

【讨论】：

【解决方案3】：

是的，这完全有可能，而且很简单。这是一个工作示例。尝试从这个开始，确认它有效，然后添加回您自己的代码。如果您遇到障碍并想出一个比 XHR 是否适用于打包应用程序更具体的问题，您可能想问一个新问题。

manifest.json：

{
  "name": "SO 15977151 for EggCup",
  "description": "Demonstrates local XHR",
  "manifest_version" : 2,
  "version" : "0.1",
  "app" : {
    "background" : {
      "scripts" : ["background.js"]
    }
  },
  "permissions" : []
}

background.js：

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create("window.html",
    { bounds: { width: 600, height: 400 }});
});

window.html：

<html>
<body>
  <div>The content is "<span id="content"/>"</div>
  <script src="main.js"></script>
</body>
</html>

main.js：

function requestListener() {
  document.querySelector("#content").innerHTML = this.responseText;
};

onload = function() {
  var request = new XMLHttpRequest();
  request.onload = requestListener;
  request.open("GET", "content.txt", true);
  request.send();
};

内容.txt：

Hello, world!

【讨论】：

太棒了！这确实有效。我的 webapp 仍然有问题。我需要使用不同版本的 jquery 吗？目前我使用的是 1.9。此外，我在使用backbone.js 和对我的收藏集进行fetch 调用时遇到问题......有什么想法吗？
jQuery 1.9 效果很好；它完全符合 CSP 标准。 github.com/GoogleChrome/chrome-app-samples/tree/master/weather 是一个愉快地使用 jQuery 的 Chrome 打包应用程序示例。我大约 80% 确定 Backbone 可以与 CSP 一起使用，但它可能需要进行一些修改（不确定，尚未使用它）。正如我在回答中所说，采取小步骤 - 从工作代码开始并不断添加新内容直到它中断，然后退后一步。祝你好运。