Richiesta JSONP con estensione chrome, la funzione callback non esiste?

Question

Sto facendo una richiesta JSONP in un'estensione chrome (script di contenuto). Tutto funziona molto bene quando sono in esecuzione come pagina web -caricando il file HTML nel mio browser-, ma quando lo carico come estensione chrome, la funzione di callback jsonp creata da jquery non sembra esistere quando il server dà la sua risposta .

mia console dice:

Uncaught ReferenceError: jQuery17105683612572029233_1323808231542 is not defined 

Ecco la mia richiesta ajax:

$.ajax({ 
    url: 'http://example.com', 
    data: 
    { 
     imgUrl: this.href, 
     returnString:true 
    }, 
    dataType: "jsonp", 
    success: function(msg){ 
     newNode.src = msg.data; 
    }, 
    error: function(msg){ 
     console.log(msg.data); 
    } 
}) 

Answer 1

Il problema è che la risposta JSONP viene catturato dalla pagina effettiva, al di fuori del codice JavaScript in modalità sandbox che lo script dei contenuti di Chrome limita anche te.

jQuery17105683612572029233_1323808231542 è il nome della funzione di richiamata che la chiamata jQuery JSONP ha generato dinamicamente per la chiamata specifica. Questa funzione è in fase di definizione nell'area di sandbox a cui lo script di contenuto ha accesso.

L'unica soluzione di cui sono a conoscenza, che ha funzionato per me, è effettuare una chiamata XHR dallo script di contenuto. A partire da Chrome 13 puoi effettuare chiamate XHR tra domini diversi dagli script di contenuto (piuttosto interessanti). Nel file manifest è necessario aggiungere l'URL esterno per i permessi:

{ 
    ... 
    "permissions": [ 
     "http://example.com" 
    ] 
} 

si può quindi effettuare la chiamata XHR in questo modo:

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "http://example.com/", true); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
     //handle the xhr response here 
    } 
} 
xhr.send(); 

Sarà necessario fare alcune delle cose che jQuery stava facendo automaticamente per te, come codificare i valori dell'oggetto dati nell'URL XHR (nel tuo caso "imrUrl" e "returnString") così come convertire la risposta da xhr.responeText o xhr.reponseXML in un oggetto.

Lo svantaggio di questo approccio è che se condividi questo codice tra un'estensione di Chrome e qualcos'altro (come un bookmarklet) ora devi avere una logica diversa per il caso d'uso di Chrome.

Per maggiori informazioni visita: Chrome Extension XHR