Загрузка локального контента через XHR в пакетное приложение Chrome

Я пытаюсь загрузить веб-приложение, которое я создал с помощью Backbone, и оно извлекает файлы шаблонов 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.

Я не могу найти никакой реальной информации о том, как это сделать, поэтому любая помощь будет очень благодарна!


xmlhttprequest google-chrome ajax google-chrome-app
person darylhedley    schedule 12.04.2013    source источник
comment
Почему ваше происхождение равно нулю? Если вы делаете XHR из стандартного окна упакованного приложения в файл внутри приложения, это работает.   -  person Josh Lee    schedule 12.04.2013
comment
Ну, мое происхождение кажется нулевым, потому что в моем приложении есть страница песочницы, которая является веб-приложением. Это веб-приложение загружает XML-файл в качестве источника данных. Но это, кажется, не работает. Как мне сделать запрос XHR?   -  person darylhedley    schedule 13.04.2013

Ответы (3)


arrow_upward
6
arrow_downward

Да, это вполне возможно, и это легко. Вот рабочий образец. Попробуйте начать с этого, убедитесь, что он работает, а затем добавьте свой собственный код. Если вы столкнетесь с препятствием и зададите более конкретный вопрос, чем вопрос о том, работают ли XHR в упакованных приложениях, вы можете задать новый вопрос.

манифест.json:

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

фон.js:

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

окно.html:

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

основной.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!
person sowbug    schedule 13.04.2013
comment
Здорово! Это работает. Все еще есть проблема с моим веб-приложением. Нужна ли мне другая версия jquery? В настоящее время я использую 1.9. Также у меня проблема с использованием backbone.js и вызовом извлечения из моей коллекции... есть идеи? - person darylhedley; 13.04.2013
comment
jQuery 1.9 отлично работает; он полностью совместим с CSP. github.com/GoogleChrome/chrome-app-samples/tree/master/ погода — один из примеров пакетного приложения Chrome, в котором успешно используется jQuery. Я примерно на 80% уверен, что Backbone работает с CSP, но может потребоваться несколько модификаций (не уверен, не работал с ним). Как я сказал в своем ответе, делайте небольшие шаги - начинайте с работающего кода и продолжайте добавлять новый материал, пока он не сломается, а затем сделайте шаг назад. Удачи. - person sowbug; 14.04.2013

arrow_upward
2
arrow_downward

Вы делаете запрос со страницы в песочнице, а страницы в песочнице имеют нулевое происхождение.

Я опубликовал эту проблему вопрос в группе Google.

Если Chrome не решит изменить политику песочницы, кажется, что единственным обходным решением является отправка запросов XHR со страницы, не находящейся в песочнице, и использование API передачи сообщений Chrome, чтобы передать его на вашу изолированную страницу.

Я не знаю, почему это должно быть так сложно.

РЕДАКТИРОВАТЬ:

ответ от команды Chrome заключался в том, чтобы изменить заголовок CORS на *.

person Paul Draper    schedule 08.06.2013
comment
Я полностью согласен. По этой причине я фактически отказался от использования упакованных приложений Chrome. Я перешел на node-webkit, что дало мне гораздо больше возможностей для моего приложения. - person darylhedley; 09.06.2013
comment
Оболочка скобок также является вариантом, на который стоит обратить внимание. - person Paul Draper; 06.10.2013
comment
Оболочка брекетов действительно хороша. Мне также нравятся их грубые задачи. У них можно многому научиться. - person darylhedley; 06.10.2013

arrow_upward
0
arrow_downward

Я считаю, что ваша проблема на стороне сервера, а не на стороне клиента. Сервер должен отправить следующий заголовок для jQuery, чтобы обработать ответ:

Access-Control-Allow-Origin: *

Однако проблема в том, что любая страница теперь может загружать этот контент. Как только вы узнаете идентификатор своего расширения, вы можете изменить этот заголовок на что-то вроде:

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.

Как только я добавил заголовок Access-Control-Allow-Origin в ответ php, все заработало нормально.

Опять же, установка этого параметра на * может быть угрозой безопасности, поскольку любая страница браузера в любом месте может загружать ее как встроенную.

person Colselaw    schedule 13.04.2013