为什么我的 ajax 调用在 Chrome 分机中是同步的？

Question

我一直在尝试在 chrome 扩展中使用一些 ajax。

我有一个内容脚本，应该向现有页面添加一些 html。

我试过 JQuery.get、JQuery.load 和 ng-include。

并且它们都在控制台中显示警告，告诉我 synchronous XHR 已被弃用（这些不是异步的吗？？？）。然后页面显示这种奇怪的行为，告诉我一些 Pusher 没有定义，然后刷新页面并杀死我插入的 div.

有什么问题吗？？

示例代码 - 如果我启用第一个 var txt，它会完美运行。相反，如果我启用第二个 var txt（已注释），它会失败。

 //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

好的，事情是这样的：

1 - 扩展域与页面域不同，因此它尝试从页面域而不是扩展文件加载内容。（并且未找到资源）。在这种情况下，警告消息完全具有误导性。

解决方案：使用 chrome.extention.getURL('myhtml.html') 得到正确的完整 url。或者使用您的扩展 ID 连接字符串以创建完整路径。

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

2 - 即使这样做，也存在跨域请求问题。该页面只接受来自其自己域的请求，除非您授予它正确的权限。有必要在 manifest.json 文件中添加对此资源的权限：

{
    "manifest_version": 2,

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

    "web_accessible_resources": [
        "myhtml.html"
    ]

}

为什么我的 ajax 调用在 Chrome 分机中是同步的？

Why are my ajax calls synchronous in Chrome extension?

ajax

jquery

google-chrome-extension

content-script

angularjs