ChromeパッケージのXHRを使用してローカルコンテンツをロードする

私はBackboneを使用してビルドしたWebアプリケーションで読み込みしようとしていて、ローカルに保存されているJSONファイルとHTMLテンプレートファイルを取得します。私はChromeパッケージアプリケーションで、「get/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

あなたの起源はなぜnullですか？パッケージ化されたアプリケーションの標準ウィンドウからアプリケーション内のファイルにXHRを実行すると、XHRは機能します。 –

私のアプリはwebappのサンドボックスページを持っているので、私の起源はnullと思われます。この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％確信しています。バックボーンはCSPで動作しますが、いくつかの変更が必要になるかもしれません。私が答えて言ったように、小さなステップをとってください。作業コードから始めて、新しいものを追加してからブレークしてから元に戻してください。がんばろう。 – sowbug

私はあなたの問題がクライアント側ではなくサーバー側にあると信じています。サーバが応答に対処するためのjQueryのために以下のヘッダを送信する必要がある：

Access-Control-Allow-Origin: *

問題を、これに、しかし、任意のページは現在、そのコンテンツをロードすることができるということです。これらを動作させるに示した

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

次のようなものの短いテスト：あなたはあなたの拡張機能のIDを知っていたら、あなたのような何かにそのヘッダーを変更することができます

<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

サンドボックス化されたページからリクエストを行い、サンドボックス化されたページがnullの起点を持っています。

~~私はこのissue質問をGoogleグループに投稿しました。~~

クロームはサンドボックスポリシーを変更することを決定しない限り、唯一の回避策は、非サンドボックスページからXHRリクエストを作成し、自分のサンドボックスページにそれを与えるためにChromeのメッセージパッシングAPIを使用することです表示されます。

私はそれがなぜ難しいか分からない。

EDIT：

クロームチームからanswerは*にCORSヘッダーを変更しました。

出典

2013-06-08 05:10:00

私は完全に同意します。私は実際にこの理由でクロムパッケージのアプリケーションを使用することに反対しました。私はnode-webkitに移りました。これは私のアプリケーションのためにもっとたくさんのオプションを与えました。 – darylhedley

括弧で囲まれたシェルも見てみる価値のあるオプションです。 –

大括弧のシェルは本当に良いです。私は彼らのしなやかな仕事も好きです。彼らから学ぶべきことはたくさんある。 – darylhedley

ChromeパッケージのXHRを使用してローカルコンテンツをロードする

答えて

関連する問題