Question

我有一个使用AngularJS的Chrome应用，我在其中沙箱化了html文件以解决CSP错误。当我尝试使用<ng-include src="'new.html'"></ng-include>在我的主文件中添加另一个html文件时，会生成错误：

XMLHttpRequest cannot load chrome-extension://menecddfopgklpoafdcifghpahpahlcb/new.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

如何在沙盒Chrome应用中添加ng-include？

我的manifest.json文件：

{
  "name": "Test",
  "description": "Test App",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": ["storage", "webview", "<all_urls>", { "fileSystem": ["write"] }],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "paxcom-16.png", "128": "paxcom-128.png" },
  "sandbox": {
      "pages": ["index.html", "new.html"]
  }
}

我的index.html文件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example.csp-production</title>
  <meta http-equiv="Access-Control-Allow-Origin" content="*">

  <script src="angular.min.js"></script>
  <script src="script.js"></script>
  <script src="sql.js"></script>

</head>
<body ng-app="cspExample" ng-csp="">
  <div ng-controller="MainController as ctrl">
  <div>
    <button ng-click="ctrl.inc()" id="inc">Increment</button>
    <span id="counter">
      {{ctrl.counter}}
    </span>
    <ng-include src="'new.html'"></ng-include>
  </div>

</div>
</body>
</html>

Answer 1

我为你创建了一个指令：）

myApp.directive('agInclude', function($sce){
    return {
        restrict : 'AE',
        replace : true,
        template : "<div ng-include='parsedUrl'></div>",
        scope : {
            agInclude : "@"
        },
        link : function(scope, element, attrs) {
            scope.parsedUrl = $sce.trustAsResourceUrl(chrome.extension.getURL(scope.$eval(attrs.agInclude)));
        }
    }
});

基本上，我正在创建一个中间步骤，以正确的chrome格式解析url并在新的ng-include中使用它。

用法（就像使用ng-include一样）：<div ag-include="'new.html'"></div>

使用AngularJS的Chrome App（沙盒）

1 个答案: