装载机没有出现在chrome扩展中

I've an app that retrieve server data using ajax. I've tested in localhost, the loader work fine, but when I install my extension and click on the browser action popup, the loader won't show. The little popup delayed for 2 second and shows the result.

我有一个使用ajax检索服务器数据的应用程序。我已在localhost中测试过,加载程序工作正常,但是当我安装扩展程序并单击浏览器操作弹出窗口时,加载程序将无法显示。小弹出延迟2秒,显示结果。

popup.html

<div class="cssLoader" ng-show="loader">Fetching...</div>

app.controller('MainControl', function($scope, $http){

    $scope.loader = true;

    $http({
        url: "http://www.corsproxy.com/mydomain.net/items.php",
        method: "GET",
    }).success(function(data) {
        $scope.data = data;
        $scope.loader = false;
    });
});

2 个解决方案

#1

According to the docs, CSP "is necessary when developing things like Google Chrome Extensions" (more info can be found on the linked page).

根据文档,CSP“在开发Google Chrome Extensions之类的东西时是必要的”(可在链接页面上找到更多信息)。

Furthermore, besides defining ng-csp on your root element, there is on more crucial point (which affects ngShow/ngHide):

此外,除了在根元素上定义ng-csp之外,还有更重要的一点(它会影响ngShow / ngHide):

CSP forbids JavaScript to inline stylesheet rules. In non CSP mode Angular automatically includes some CSS rules (e.g. ngCloak). To make those directives work in CSP mode, include the angular-csp.css manually.

CSP禁止JavaScript内联样式表规则。在非CSP模式下,Angular会自动包含一些CSS规则(例如ngCloak)。要使这些指令在CSP模式下工作,请手动包含angular-csp.css。

I found this to be necessary only if the angular.js script is defined inside the app's context.

我发现只有在应用程序的上下文中定义angular.js脚本时才需要这样做。

In any case, here is the source code of minimal demo extension that seems to work fine for me:

在任何情况下,这里是最小的演示扩展的源代码,似乎对我来说很好:

Structure:

extension-root-dir/
    |_____manifest.json
    |_____popup.html
    |_____popup.js
    |_____angular.js
    |_____angular-csp.css

manifest.json:

{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",
    "browser_action": {
        "default_title": "Test Extension",
        //"default_icon": {
        //     "19": "img/icon19.png",
        //     "38": "img/icon38.png"
        //},
        "default_popup": "popup.html"
    }
}

popup.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Test Extension</title>
        <link rel="stylesheet" href="angular-csp.css" />
    </head>
    <body ng-csp ng-app="myApp" ng-controller="mainCtrl">
        <div ng-show="loader">Fetching...</div>
        <div ng-hide="loader">{{status}}</div>
        <script src="angular.js"></script>
        <script src="popup.js"></script>
    </body>
</html>

popup.js:

var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($http, $scope) {
    $scope.loader = true;

    $http({
        url: "http://www.corsproxy.com/mydomain.net/items.php",
        method: "GET"
    }).finally(function () {
        $scope.loader = false;
    }).then(function (response) {
        $scope.data   = response.data;
        $scope.status = 'Success !';
    }, function (response) {
        $scope.status = 'ERROR !';
    });
});

(BTW, I am using AngularJS v1.2.16.)

(顺便说一句,我使用的是AngularJS v1.2.16。)

#2

Without seeing more of your code it is difficult to know for sure. Nonetheless, my suspicion (based upon the fact that your code works outside of the Chrome extension environment but not inside that environment) is that since you're operating in a Chrome Extension environment, you'll need to include the ng-csp directive (see Chrome documentation or Angular documentation).

如果没有看到更多的代码,很难确定。尽管如此,我怀疑(基于您的代码在Chrome扩展环境之外但不在该环境中工作的事实)是因为您在Chrome扩展环境中运行,因此您需要包含ng-csp指令(请参阅Chrome文档或Angular文档)。

I developed an Angular app inside a chrome extension and I needed to use ng-csp in order for Angular to load and fully function properly.

我在chrome扩展中开发了一个Angular应用程序,我需要使用ng-csp来加载Angular并完全正常运行。

Essentially, Chrome extensions (and even more apps) place a number of restrictive security permissions on the browser environment and ng-csp tells Angular to operate in a way that is more consistent with a strict CSP.

从本质上讲,Chrome扩展程序(甚至更多应用程序)在浏览器环境中设置了许多限制性安全权限,ng-csp告诉Angular以与严格CSP更一致的方式运行。

I have included an example below that shows loading the entire Angular application properly:

我在下面的示例中显示了正确加载整个Angular应用程序:

<!DOCTYPE html>
<html ng-app="myApp" ng-csp>
<head>
    <meta charset="utf-8">
    <title>My Extension</title>
    <link href="css/index.css" rel="stylesheet">
    <!-- Include in the next line your Angular library code -->
    <script type="text/javascript" src="js/angular-lib.js"></script>
    <!-- Include in the next line your custom Angular code such as the $http to load the loader -->
    <script type="text/javascript" src="js/myapp.js"></script>
</head>
<body>
<!-- Place your HTML code for the 'Fetching' anywhere here in the body -->
</body>
</html>

#1