Tại sao ajax của tôi gọi đồng bộ trong tiện ích của Chrome?

Question

Tôi đã cố gắng sử dụng một số ajax trong phần mở rộng của chrome.

Tôi có một tập lệnh nội dung được cho là thêm một số html vào một trang hiện có.

Tôi đã thử JQuery.get, JQuery.load và ng-include.

Và tất cả chúng đều hiển thị cảnh báo trong bảng điều khiển, cho tôi biết synchronous XHR không còn được dùng nữa (không phải là những điều này không đồng bộ theo bản chất ???). Và sau đó trang hiển thị hành vi kỳ lạ này, cho tôi biết rằng một số Pusher không được xác định, sau đó làm mới trang và giết div được chèn của tôi.

Điều gì có thể sai?

Mã mẫu - Nếu tôi bật var txt đầu tiên, nó hoạt động hoàn hảo. Nếu thay vào đó tôi kích hoạt var txt thứ hai (nhận xét), nó không thành công.

//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, đây là những gì sẽ xảy ra:

1 - Tên miền mở rộng khác với tên miền trang, vì vậy nó đã cố gắng để tải mọi thứ từ tên miền của trang, không phải từ các tập tin mở rộng. (Và không tìm thấy tài nguyên). Thông báo cảnh báo hoàn toàn gây hiểu nhầm trong trường hợp này.

Giải pháp: sử dụng chrome.extention.getURL('myhtml.html') để nhận url hoàn chỉnh thích hợp. Hoặc ghép các chuỗi bằng ID của tiện ích để tạo đường dẫn đầy đủ.

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

2 - Ngay cả khi làm điều đó, cũng có một vấn đề yêu cầu tên miền chéo. Trang chỉ chấp nhận các yêu cầu từ tên miền riêng của nó, trừ khi bạn cấp cho nó quyền thích hợp. Đó là cần thiết để thêm vào các tập tin manifest.json sự cho phép để cập khu vực này:

{ 
    "manifest_version": 2, 

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

    "web_accessible_resources": [ 
     "myhtml.html" 
    ] 

}