Question

我正在尝试加载我使用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.

我找不到任何关于如何做到这一点的真实信息，所以任何帮助都会非常感谢！

Answer 1

是的，这完全有可能，而且很容易。这是一个工作样本。尝试从此开始，确认它是否有效，然后在您自己的代码中添加回来。如果您遇到障碍并提出一个更具体的问题，而不是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();
};

content.txt：

Hello, world!

Answer 2

您正在从沙盒页面发出请求，沙盒页面的原点为空。

~~我已在Google网上发布了此issue个问题。~~

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

我不知道为什么这么困难。

编辑：

Chrome小组的answer是将CORS标题更改为*。

Answer 3

我相信你的问题出在服务器端，而不是客户端。服务器需要为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标题，它就可以正常工作。

同样，将此设置为*可能会带来安全风险，因为任何位置的浏览器页面都允许内联加载。

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

3 个答案: