在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加載本地內容

回答

相關問題