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

我试图加载一个使用Backbone构建的Web应用程序，并且它在本地存储JSON和HTML模板文件。我用Chrome封装应用不知道是否有可能通过某种“得到”/Ajax请求加载这些文件？在Chrome打包应用程序中通过XHR加载本地内容

目前我得到这个...

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.

我无法找到如何做到这一点，因此任何帮助将是巨大的感谢任何真实的信息！

来源

2013-04-12 darylhedley

为什么你的原点为空？如果您从包装应用程序中的标准窗口执行XHR，并将其应用于应用程序内部的文件，它就可以工作。 –

那么我的起源似乎是空的，因为我的应用程序有一个网页应用程序的沙箱页面。这个web应用程序加载一个xml文件作为其数据源。但这似乎并不奏效。我将如何做XHR请求？ – darylhedley

是的，这是完全可能的，而且很简单。这是一个工作示例。尝试从此开始，确认它是否有效，然后将其添加回您自己的代码中。如果你打一个路障，并拿出比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!

来源

2013-04-13 03:31:52 sowbug

太棒了！这确实有效。仍然有问题与我的webapp。我需要有不同版本的jQuery吗？目前我使用1.9。此外，我在使用backbone.js和我的收藏中获取调用时遇到问题...有什么想法？ – darylhedley

jQuery 1.9很棒;它完全符合CSP标准。 https://github.com/GoogleChrome/chrome-app-samples/tree/master/weather是愉快使用jQuery的Chrome打包应用程序的一个示例。我大约80％确定Backbone与CSP一起工作，但它可能需要一些修改（不确定，没有使用它）。正如我在答复中所说的那样，采取一些小步骤 - 从工作代码开始，不断添加新的东西，直到中断，然后退后一步。祝你好运。 – sowbug

我相信你的问题是在服务器端，而不是客户端。服务器需要发送下面的标题为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头，它工作得很好。

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

来源

2013-04-13 12:39:18 Colselaw

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

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

~~除非Chrome的决定改变了沙箱政策，看来唯一的解决方法是从非沙盒页让XHR请求，并使用Chrome的消息传递API把它给你的沙盒页。~~

我不知道它为什么如此困难。

编辑：

从Chrome团队的answer是改变CORS头*。

来源

2013-06-08 05:10:00

我完全同意。出于这个原因，我实际上决定不使用Chrome打包的应用程序。我转到了node-webkit，它为我的应用程序提供了更多选择。 – darylhedley

方括号外壳也是值得一看的选项。 –

括号外壳非常好。我也喜欢他们的咕噜声。很多要向他们学习。 – darylhedley

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

回答

相关问题