我有一个带有 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.
如何添加ng-include在我的沙盒 Chrome 应用程序中？
我的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>
最佳答案
我专门为你创建了一个指令:)
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 应用程序(沙盒)与 AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27165527/