Perché le mie chiamate ajax sono sincrone nell'estensione di Chrome?

Question

Ho cercato di utilizzare qualche ajax in un'estensione di Chrome.

Ho uno script di contenuto che dovrebbe aggiungere un html a una pagina esistente.

Ho provato JQuery.get, JQuery.load e ng-include.

E tutti mostrano un avviso nella console, dicendomi che synchronous XHR sono deprecati (non sono questi asincroni per natura ???). E poi la pagina mostra questo comportamento strano, mi dice che alcuni Pusher non sono definiti, quindi aggiorna la pagina e uccide il mio div inserito.

Cosa potrebbe essere sbagliato ??

Codice esempio: se abilito il primo var txt, funziona perfettamente. Se invece abilito il secondo var txt (commentato), fallisce.

//this first line works perfectly 
var txt = '<div id="myNewDiv" ng-controller="myController">{{testing}}</div>'; 

//this shows the warning and a really weird behavior 
//var txt = '<div id="myNewDiv" ng-controller="myController">{{testing}}<div ng-include="' + "'myhtml.html'" + '"></div></div>'; 


$('#a-certain-div-in-the-page').after(txt) 

var app = angular.module('myApp', []) 
    .controller('myController', function($scope) { 
     $scope.testing = 'Welcome!'; 
    }); 

angular.bootstrap(document, ['myApp']); 

Answer 1

Ok, ecco cosa succede:

1 - Il dominio estensione è diverso dal dominio pagina, in modo ha cercato di caricare le cose dal dominio della pagina, non dai file di estensione. (E la risorsa non è stata trovata). Il messaggio di avviso è totalmente fuorviante in questo caso.

Soluzione: utilizzare chrome.extention.getURL('myhtml.html') per ottenere l'URL completo corretto. Oppure concatena le stringhe usando l'ID della tua estensione per creare un percorso completo.

var txt = '<div id="myNewDiv" ng-controller="myController">{{testing}}<div ng-include="' + "'" + chrome.extension.getURL('myhtml.html') + "'" + '"></div></div>'; 

2 - Anche in questo caso, è presente anche un problema di richiesta interdominio. La pagina accetta solo richieste dal proprio dominio, a meno che non le dia le autorizzazioni appropriate. E 'necessario aggiungere nel file manifest.json il permesso a questa risorsa:

{ 
    "manifest_version": 2, 

    ..... among many others .... 

    "web_accessible_resources": [ 
     "myhtml.html" 
    ] 

}