Loading local content through XHR in a Chrome packaged app

Question

I'm trying to load in a web app that I've built using Backbone and it pulls in JSON and HTML template files that are stored locally. I was wondering with Chrome packaged apps whether it's possible to load these files by using some sort of 'get'/ajax request?

Currently I'm getting this...

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.

I can't find any real information on how to do this so any help would be great thanks!

Why is your origin null? If you do an XHR from a standard window in the packaged app to a file inside the app, it works. — Josh Lee, Apr 12 '13 at 18:49
Well my origin seems to be null because my app has a sandbox page which is a webapp. This webapp loads in an xml file as its data source. But this doesn't seem to work. How would I do an XHR request? — darylhedley, Apr 12 '13 at 21:08

score 6 · Accepted Answer · answered Apr 13 '13 at 03:31

Yes, it's totally possible, and it's easy. Here's a working sample. Try starting with this, confirm that it works, and then add back in your own code. If you hit a roadblock and come up with a more specific question than whether XHRs work in packaged apps, you might want to ask a new question.

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!

Great! That does work. Still having a problem with my webapp. Do I need to have a different version of jquery? Currently I'm using 1.9. Also I'm having a problem with using backbone.js and a fetch call on my collection...any ideas? — darylhedley, Apr 13 '13 at 10:56
jQuery 1.9 works great; it's totally CSP-compliant. https://github.com/GoogleChrome/chrome-app-samples/tree/master/weather is one example of a Chrome packaged app that happily uses jQuery. I'm about 80% sure Backbone works with CSP, but it might require a few modifications (not sure, haven't worked with it). As I said in my answer, take small steps -- start with working code and keep adding new stuff until it breaks, then step back one. Good luck. — sowbug, Apr 14 '13 at 00:34

Paul Draper · Answer 2 · 2013-10-06T03:46:49.397

2

You are making a request from a sandboxed page, and sandboxed pages have a null origin.

~~I have posted this issue question on the Google Group.~~

Unless Chrome decides to changed the sandbox policy, it appears the only workaround is to make XHR requests from a non-sandboxed page and use Chrome's message passing API to give it to your sandboxed page.

I don't know why it has to be so difficult.

EDIT:

The answer from the Chrome Team was to change the CORS header to *.

edited Oct 06 '13 at 03:46

answered Jun 08 '13 at 05:10

Paul Draper

78,542
46
206
285

1

I completely agree. I actually decided against using chrome packaged apps for this reason. I moved over to node-webkit which allowed me a lot more options for my app. – darylhedley Jun 09 '13 at 06:20
Brackets shell is also a options worth looking at. – Paul Draper Oct 06 '13 at 03:47
The brackets shell is really good. I like their grunt tasks as well. A lot to learn from them. – darylhedley Oct 06 '13 at 07:49

score 0 · Answer 3 · answered Apr 13 '13 at 12:39

I believe your problem is on the server side, rather than the client side. The server needs to send the following header for jQuery to deal with the response:

Access-Control-Allow-Origin: *

The problem, with this, however, is that any page can load that content now. Once you know the ID of your extension, you can change that header to something like:

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

A short test of something like the following showed these to work:

<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);
  });
});

This would fail with the following message if I didn't add the Access-Control-Allow-Origin header:

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

Once I added the Access-Control-Allow-Origin header on the php response, it worked fine.

Again, setting this to * may be a security risk as any browser page anywhere is allowed to load it inline.

Loading local content through XHR in a Chrome packaged app

3 Answers3

Linked