Dlaczego moje wywołania ajax są synchroniczne w rozszerzeniu Chrome?

Question

Próbowałem użyć niektórych ajax w rozszerzeniu chrome.

Mam skrypt zawartości, który ma dodać trochę html do istniejącej strony.

Próbowałem już JQuery.get, JQuery.load i ng-include.

Wszystkie one wyświetlają ostrzeżenie w konsoli, informujące mnie, że synchronous XHR są przestarzałe (czy nie są to asynchroniczne z natury ???). A następnie strona pokazuje to dziwne zachowanie, mówi mi, że niektóre Pusher nie jest zdefiniowany, a następnie odświeża stronę i zabija mojego wstawionego div.

Co może być nie tak?

Przykładowy kod - Jeśli włączę pierwszy var txt, działa idealnie. Jeśli zamiast tego włączę drugi var txt (skomentował), nie powiedzie się.

//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, oto co się dzieje:

1 - Domena rozszerzenie jest różna od domeny strony, więc starał się załadować rzeczy z domeny strony, a nie z plików rozszerzeń. (I zasób nie został znaleziony). Komunikat ostrzegawczy jest w tym przypadku całkowicie mylący.

Rozwiązanie: użyj adresu chrome.extention.getURL('myhtml.html'), aby uzyskać poprawny pełny adres URL. Lub połącz ciągi za pomocą identyfikatora rozszerzenia, aby utworzyć pełną ścieżkę.

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

2 - Nawet w tym przypadku istnieje również problem z żądaniem między domenami. Strona akceptuje tylko żądania z własnej domeny, chyba że dasz jej odpowiednie uprawnienia. Jest to konieczne, aby dodać w pliku manifest.json uprawnienie do tego zasobu:

{ 
    "manifest_version": 2, 

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

    "web_accessible_resources": [ 
     "myhtml.html" 
    ] 

}