Warum werden meine Ajax-Anrufe synchron in der Chrome-Erweiterung getätigt?

Question

Ich habe versucht, etwas Ajax in einer Chrome-Erweiterung zu verwenden.

Ich habe ein Inhaltsskript, das HTML zu einer vorhandenen Seite hinzufügen soll.

Ich habe versucht JQuery.get, JQuery.load und ng-include.

Und alle von ihnen zeigen eine Warnung in der Konsole, sagen mir synchronous XHR sind veraltet (sind nicht diese asynchron von Natur aus ???). Und dann zeigt die Seite dieses seltsame Verhalten, sagt mir, dass einige Pusher nicht definiert ist, dann aktualisiert die Seite und tötet mein eingefügtes div.

Was könnte falsch sein ??

Beispielcode - Wenn ich das erste var txt aktiviere, funktioniert es perfekt. Wenn ich stattdessen das zweite var txt (kommentiert) aktiviere, schlägt es fehl.

//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, hier ist was passiert:

1 - Die Erweiterung Domain unterscheidet sich von der Seite Domain, so dass er versucht, die Dinge von der Seite der Domäne zu laden, nicht von den Erweiterungsdateien. (Und die Ressource wurde nicht gefunden). Die Warnmeldung ist in diesem Fall völlig irreführend.

Lösung: Verwenden Sie chrome.extention.getURL('myhtml.html'), um die richtige vollständige URL zu erhalten. Oder verketten Sie Zeichenfolgen mithilfe der ID Ihrer Erweiterung, um einen vollständigen Pfad zu erstellen.

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

2 - Auch wenn dies geschieht, gibt es auch ein domänenübergreifendes Anfrageproblem. Die Seite akzeptiert nur Anforderungen von ihrer eigenen Domäne, es sei denn, Sie geben ihr die richtigen Berechtigungen. Es ist notwendig, in der manifest.json Datei, um die Erlaubnis zu dieser Ressource hinzufügen:

{ 
    "manifest_version": 2, 

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

    "web_accessible_resources": [ 
     "myhtml.html" 
    ] 

}