Why are my synchronous ajax calls expanding in Chrome?

Question

I am trying to use some ajax in a chrome extension.

I have a script content that should add some html to an existing page.

I tried JQuery.get , JQuery.load and ng-include .

And they all show a warning in the console saying that synchronous XHR are out of date (aren't these asynchronous in nature ???). And then the page shows this strange behavior, tells me that some Pusher not defined, then it refreshes the page and kills my inserted div.

What could be wrong?

Sample code. If I include the first var txt , it works fine. If instead I include the second var txt (commented out), it fails.

  //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, here's what happens:

1 - The extension domain is different from the page domain, so it tried to load things from the page domain, not from the extension files. (And the resource was not found). In this case, the warning message is completely misleading.

Solution: use chrome.extention.getURL('myhtml.html') to get the correct full url. Or concatenate strings using your extension identifier to create the full path.

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

2 - Even so, a cross-domain request problem occurs. A page only accepts requests from its own domain, unless you give it the correct permissions. You must add permission to this resource in the manifest.json file:

 { "manifest_version": 2, ..... among many others .... "web_accessible_resources": [ "myhtml.html" ] }