CODEWITHSUNDEEP
angularjsgoogle-chrome-extensiongoogle-chrome-appangularjs-ng-include
Ric
Ric

Reputation: 211

Chrome App(sandboxed) with AngularJS

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>

Upvotes: 2

Views: 654

Answers (1)

Augie Gardner
Augie Gardner

Reputation: 2775

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>

Upvotes: 4

Related Questions