Tải nội dung cục bộ qua XHR trong ứng dụng đóng gói của Chrome

Tôi đang cố gắng tải trong ứng dụng web mà tôi đã tạo bằng Backbone và nó kéo trong các tệp mẫu JSON và HTML được lưu trữ cục bộ. Tôi đã tự hỏi với các ứng dụng đóng gói của Chrome cho dù có thể tải các tệp này bằng cách sử dụng một số loại yêu cầu 'get'/ajax?Tải nội dung cục bộ qua XHR trong ứng dụng đóng gói của Chrome

Hiện nay tôi nhận được này ...

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.

tôi không thể tìm thấy bất kỳ thông tin thực tế về cách để làm điều này vì vậy bất kỳ trợ giúp sẽ là tuyệt vời cảm ơn!

Nguồn

2013-04-12 darylhedley

Tại sao mã nguồn gốc của bạn rỗng? Nếu bạn làm một XHR từ một cửa sổ tiêu chuẩn trong ứng dụng đóng gói cho một tập tin bên trong ứng dụng, nó hoạt động. –

Cũng nguồn gốc của tôi có vẻ là null vì ứng dụng của tôi có một trang sandbox là một ứng dụng web. Ứng dụng web này tải trong tệp xml dưới dạng nguồn dữ liệu của nó. Nhưng điều này dường như không hoạt động. Tôi sẽ yêu cầu XHR bằng cách nào? – darylhedley

Có, điều đó hoàn toàn có thể và rất dễ dàng. Đây là một mẫu làm việc. Hãy thử bắt đầu với điều này, xác nhận rằng nó hoạt động, và sau đó thêm lại trong mã của riêng bạn. Nếu bạn gặp phải rào cản và đưa ra câu hỏi cụ thể hơn liệu XHR có hoạt động trong các ứng dụng đóng gói hay không, bạn có thể muốn đặt câu hỏi mới.

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!

Nguồn

2013-04-13 03:31:52 sowbug

Tuyệt vời! Điều đó không hiệu quả. Vẫn gặp sự cố với webapp của tôi. Tôi có cần phải có một phiên bản jquery khác không? Hiện tại tôi đang sử dụng 1,9. Ngoài ra tôi đang gặp một vấn đề với việc sử dụng backbone.js và một cuộc gọi lấy về bộ sưu tập của tôi ... bất kỳ ý tưởng? – darylhedley

jQuery 1.9 hoạt động tốt; nó hoàn toàn tương thích với CSP. https://github.com/GoogleChrome/chrome-app-samples/tree/master/weather là một ví dụ về ứng dụng được đóng gói của Chrome sử dụng jQuery vui vẻ. Tôi là 80% chắc chắn Backbone làm việc với CSP, nhưng nó có thể yêu cầu một vài sửa đổi (không chắc chắn, đã không làm việc với nó). Như tôi đã nói trong câu trả lời của tôi, hãy thực hiện các bước nhỏ - bắt đầu với mã làm việc và tiếp tục thêm nội dung mới cho đến khi nó bị hỏng, sau đó quay lại một bước. Chúc may mắn. – sowbug

Tôi tin rằng vấn đề của bạn nằm ở phía máy chủ chứ không phải phía máy khách. Máy chủ cần gửi tiêu đề sau cho jQuery để giải quyết phản hồi:

Access-Control-Allow-Origin: *

Vấn đề, với điều này, tuy nhiên, bất kỳ trang nào cũng có thể tải nội dung đó ngay bây giờ. Một khi bạn biết ID của phần mở rộng, bạn có thể thay đổi tiêu đề đó một cái gì đó như:

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

Một bài kiểm tra ngắn của một cái gì đó như sau cho thấy những hoạt động được:

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

này sẽ thất bại với các sau tin nhắn nếu tôi không thêm Access-Control-Allow-Origin tiêu đề:

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

khi tôi thêm Access-Control-Allow-Origin tiêu đề trên các phản ứng php, nó làm việc tốt.

Một lần nữa, thiết lập điều này thành * có thể là một nguy cơ bảo mật vì bất kỳ trang trình duyệt nào cũng được phép tải nội tuyến.

Nguồn

2013-04-13 12:39:18 Colselaw

Bạn đang thực hiện yêu cầu từ trang được hộp cát và các trang có hộp cát có gốc null.

~~Tôi đã đăng câu hỏi này issue trên Nhóm Google.~~

Trừ khi Chrome quyết định thay đổi chính sách sandbox, có vẻ như giải pháp thay thế duy nhất là yêu cầu XHR từ trang không có hộp cát và sử dụng API nhắn tin qua Chrome để đưa nó vào trang hộp cát của bạn.

Tôi không biết tại sao nó lại quá khó.

EDIT:

Các answer từ Đội Chrome là để thay đổi tiêu đề CORS để *.

Nguồn

2013-06-08 05:10:00

Tôi hoàn toàn đồng ý. Tôi thực sự quyết định không sử dụng các ứng dụng đóng gói chrome vì lý do này. Tôi đã chuyển sang nút webkit cho phép tôi có nhiều tùy chọn hơn cho ứng dụng của mình. – darylhedley

Chân đế vỏ cũng là một lựa chọn đáng xem. –

Dấu ngoặc đơn thực sự tốt. Tôi cũng thích công việc của họ. Rất nhiều điều để học hỏi từ họ. – darylhedley

Tải nội dung cục bộ qua XHR trong ứng dụng đóng gói của Chrome

Trả lời

Các vấn đề liên quan