Caricamento del contenuto locale tramite XHR in un'app packata di Chrome

Sto provando a caricare in un'app Web che ho creato utilizzando Backbone e recupera file modello JSON e HTML archiviati localmente. Mi chiedevo con le app packaged di Chrome se è possibile caricare questi file utilizzando una sorta di richiesta 'get'/ajax?Caricamento del contenuto locale tramite XHR in un'app packata di Chrome

Attualmente sto ottenendo questo ...

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.

non riesco a trovare alcuna informazione reale su come fare questo in modo che qualsiasi aiuto sarebbe grande, grazie!

fonte

2013-04-12 darylhedley

Perché la tua origine è nulla? Se si esegue un XHR da una finestra standard nell'app pacchettizzata a un file all'interno dell'app, funziona. –

Beh, la mia origine sembra essere nullo perché la mia app ha una pagina sandbox che è una webapp. Questa webapp carica in un file xml come origine dati. Ma questo non sembra funzionare. Come potrei fare una richiesta XHR? – darylhedley

Sì, è totalmente possibile ed è facile. Ecco un esempio funzionante. Prova a iniziare con questo, conferma che funziona, quindi aggiungi di nuovo il tuo codice. Se si colpisce un roadblock e si pone una domanda più specifica rispetto al fatto che gli XHR funzionino in app pacchettizzate, è possibile fare una nuova domanda.

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!

fonte

2013-04-13 03:31:52 sowbug

Ottimo! Questo funziona. Ho ancora un problema con la mia webapp. Devo avere una versione diversa di jquery? Attualmente sto usando 1.9. Inoltre ho problemi con l'uso di backbone.js e una chiamata fetch sulla mia collezione ... qualche idea? – darylhedley

jQuery 1.9 funziona alla grande; è totalmente conforme a CSP. https://github.com/GoogleChrome/chrome-app-samples/tree/master/weather è un esempio di un'app packed di Chrome che utilizza felicemente jQuery. Sono sicuro all'80% che Backbone funzioni con CSP, ma potrebbe richiedere alcune modifiche (non sono sicuro, non hanno funzionato con esso). Come ho detto nella mia risposta, fai piccoli passi - inizia con il codice di lavoro e continua ad aggiungere nuove cose fino a quando non si rompe, quindi fai un passo indietro. In bocca al lupo. – sowbug

Credo che il vostro problema è sul lato server, piuttosto che il lato client. Il server deve inviare la seguente intestazione per jQuery per affrontare la risposta:

Access-Control-Allow-Origin: *

Il problema, con questo, però, è che qualsiasi pagina può caricare contenuti che ora. Una volta che si conosce l'ID del proprio interno, è possibile modificare tale intestazione a qualcosa di simile:

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

Un breve test di qualcosa di simile alla seguente hanno mostrato che questi funzionino:

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

Ciò che non con il seguente messaggio se non ho aggiunto l'intestazione 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.

Una volta ho aggiunto il Access-Control-Allow-Origin intestazione sulla risposta php, ha funzionato bene.

Anche in questo caso, l'impostazione su * può costituire un rischio per la sicurezza poiché qualsiasi pagina del browser è abilitata a caricarla in linea.

fonte

2013-04-13 12:39:18 Colselaw

Si sta effettuando una richiesta da una pagina in modalità sandbox e le pagine in modalità sandbox hanno origine nulla.

~~Ho inserito questa domanda issue nel Gruppo Google.~~

A meno che Chrome decide di cambiare la politica sandbox, appare l'unica soluzione è quella di rendere le richieste XHR da una pagina non in modalità sandbox e utilizzare il messaggio di Chrome passando API per dare alla tua pagina sandbox.

Non so perché deve essere così difficile.

EDIT:

Il answer dal team di Chrome è stato quello di modificare l'intestazione CORS a *.

fonte

2013-06-08 05:10:00

Sono completamente d'accordo. In realtà, ho deciso di non utilizzare app in package cromato per questo motivo. Mi sono trasferito su node-webkit che mi ha permesso molte più opzioni per la mia app. – darylhedley

La shell delle parentesi è anche un'opzione che vale la pena guardare. –

La shell delle parentesi è veramente buona. Mi piacciono anche i loro compiti da grugnito. Molto da imparare da loro. – darylhedley

Caricamento del contenuto locale tramite XHR in un'app packata di Chrome

risposta

Problemi correlati