Chrome App(sandboxed) with AngularJS -
i have chrome app angularjs in have sandboxed html files resolve csp error. when try add html file in main file using <ng-include src="'new.html'"></ng-include> , generates error:
xmlhttprequest cannot load chrome-extension://menecddfopgklpoafdcifghpahpahlcb/new.html. no 'access-control-allow-origin' header present on requested resource. origin 'null' therefore not allowed access.
how can add ng-include in sandboxed chrome app??
my manifest.json file:
{ "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"] } } my index.html file:
<!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 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>
i created directive :)
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))); } } }); essentially, i'm creating middle step parses url in correct chrome format , using in new ng-include.
usage (just use ng-include): <div ag-include="'new.html'"></div>
Comments
Post a Comment