Chrome App(sandboxed) with AngularJS

Question

I have a Chrome app with AngularJS in which I have sandboxed the html files to resolve CSP error. When I try to add another html file in my main file using <ng-include src="'new.html'"></ng-include> , it generates an error:

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.

How can I add ng-include in my 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 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>

Augie Gardner · Accepted Answer · 2014-12-01 18:43:31Z

4

I created a directive just for you :)

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 a middle step that parses the url in the correct chrome format and using that in a new ng-include.

usage (just as you would use ng-include): <div ag-include="'new.html'"></div>

edited Dec 1, 2014 at 18:43

answered Nov 28, 2014 at 21:37

Augie Gardner

2,7753 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RPDeshaies Over a year ago

This is a very usefull directive. I'm going to keep it in my chrome extension angular template !

Collectives™ on Stack Overflow

Chrome App(sandboxed) with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related