Chrome 패키지 앱에서 XHR을 통해 로컬 콘텐츠로드

Backbone을 사용하여 빌드 한 웹 앱을로드하려고하고 로컬에 저장된 JSON 및 HTML 템플릿 파일을 가져옵니다. 나는 어떤 종류의 'get'/ ajax 요청을 사용하여 이러한 파일을로드 할 수 있는지 Chrome 패키지 앱으로 궁금해하십니까?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을 수행하면 작동합니다. –

내 응용 프로그램이 웹 응용 프로그램 인 샌드 박스 페이지를 가지고 있기 때문에 내 원본이 null 인 것으로 보입니다. 이 webapp는 데이터 소스로 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를 사용하고 있습니다. 또한 백본을 사용하는 데 문제가 있습니다 .js 및 콜렉션 가져 오기 ... 아이디어가 있습니까? – darylhedley

jQuery 1.9는 훌륭하게 작동합니다. 그것은 전적으로 CSP와 호환됩니다. https://github.com/GoogleChrome/chrome-app-samples/tree/master/weather는 jQuery를 기쁘게 사용하는 Chrome 패키지 앱의 한 예입니다. 나는 백본이 CSP와 함께 작동한다는 사실을 약 80 % 확신하지만 몇 가지 수정이 필요할 수도있다. 내가 대답 할 때 말했듯이, 작은 단계를 취하십시오 - 작업 코드로 시작하여 중단 될 때까지 새로운 것을 계속 추가 한 다음 한 단계 뒤로 물러나십시오. 행운을 빕니다. – sowbug

저는 클라이언트 측이 아니라 서버 측에 문제가 있다고 생각합니다. 이와

Access-Control-Allow-Origin: *

문제는, 그러나, 모든 페이지는 이제 그 내용을로드 할 수 있다는 것입니다 : 서버는 jQuery를 응답을 처리하기 위해 다음과 같은 헤더를 보낼 필요가있다. 이러한 작업을 보여 주었다

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

샌드 박스 처리 된 페이지에서 요청하고 샌드 박스 처리 된 페이지의 널 출신 페이지가 있습니다.

~~Google 그룹에 issue 질문을 게시했습니다.~~

Chrome에서 샌드 박스 정책을 변경하지 않는 한 샌드 박스가 아닌 페이지에서 XHR 요청을하고 Chrome의 메시지 전달 API를 사용하여 샌드 박스 처리 된 페이지에 XHR 요청을 보내는 유일한 방법이 있습니다.

나는 왜 그렇게 어려워 야하는지 모르겠다.

편집 :

크롬 팀에서 answer *이 CORS 헤더를 변경하는 것이 었습니다.

출처

2013-06-08 05:10:00

전적으로 동의합니다. 나는 실제로 이러한 이유로 크롬 패키지 응용 프로그램을 사용하지 않기로 결정했습니다. 나는 node-webkit으로 옮겨서 내 앱에 대한 더 많은 옵션을 허용했다. – darylhedley

대괄호 껍질도 살펴볼 가치가있는 옵션입니다. –

대괄호 껍질은 정말 좋습니다. 나는 그들의 과자 작업도 좋아한다. 그들에게서 배울 것이 많습니다. – darylhedley

Chrome 패키지 앱에서 XHR을 통해 로컬 콘텐츠로드

답변

관련 문제