Loading local content through XHR in a Chrome packaged app

后端未结

关注

 3  1045

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 a

相关标签:

3条回答

旧时难觅i

2021-01-01 04:49

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 *.

0 讨论(0)
发布评论:

提交评论
- 加载中...

挽巷

2021-01-01 05:04

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!

0 讨论(0)

离开以前

2021-01-01 05:04
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...