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')获取正确的完整网址。或者使用扩展程序的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扩展程序中调用同步？

1 个答案: