Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Possible to use AngularJS for a Chrome extension's options page?

For my Chrome Extension's options page, I'd like to use Angular.js (just for the options page, not for the extension's background JS or content scripts), but including it in my page and doing something like:

<!doctype html>
<html ng-app>
<head>
  <title>Shortkeys Options</title>
  <script src="../js/jquery.min.js" type="text/javascript"></script>
  <script src="../js/angular.min.js" type="text/javascript"></script>
  <script src="../js/options.js" type="text/javascript"></script>
  <link rel="stylesheet" href="../css/options.css" />
</head>

<body>
  <div ng-controller="OptionsCtrl">
    <div ng-repeat="key in keys"></table>
  </div>
</body>
</html>

...throws this error in the dev tools console and nothing runs:

Error: Code generation from strings disallowed for this context

I assume it's because Angular is trying to write tags to the page or assign inline event handlers or something that runs inline JS, which is not allowed in Chrome extensions, so is there any way around this? Can I tell Angular to avoid using inline JS somehow, for example?

like image 952
Mike Crittenden Avatar asked Jun 19 '12 20:06

Mike Crittenden


1 Answers

You can use manifest_version: 2 by specifying that angular run in CSP-compliant mode. Just add the ng-csp attribute to the <html> in your panel page.

So your HTML would be like this:

<!doctype html>
<html ng-csp ng-app>
<head>
  <title>Shortkeys Options</title>
  <script src="../js/jquery.min.js" type="text/javascript"></script>
  <script src="../js/angular.min.js" type="text/javascript"></script>
  <script src="../js/options.js" type="text/javascript"></script>
  <link rel="stylesheet" href="../css/options.css" />
</head>

<body>
  <div ng-controller="OptionsCtrl">
    <div ng-repeat="key in keys"></table>
  </div>
</body>
</html>
like image 193
btford Avatar answered Oct 27 '22 10:10

btford