Question

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

popup.html

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

JS

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;
    });
});

Answer 1

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

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

基本上，Chrome扩展程序（甚至更多应用程序）会对浏览器环境施加一些限制性安全权限，而ng-csp会告诉Angular以更严格的CSP更一致的方式运行。

我在下面添加了一个示例，显示正确加载整个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>

Answer 2

根据 the docs ，在开发Google Chrome扩展程序时需要CSP “（可在链接页面上找到更多信息）。< / p>

此外，除了在根元素上定义ng-csp之外，还有更重要的一点（影响ngShow / ngHide）：

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

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

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

<强>结构：

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 !'; }); });

（顺便说一句，我正在使用AngularJS v1.2.16。）

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

2 个答案: