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?
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?
Share asked Jun 19, 2012 at 20:15 Mike CrittendenMike Crittenden 5,9176 gold badges49 silver badges77 bronze badges1 Answer
Reset to default 15You can use manifest_version: 2 by specifying that angular run in CSP-pliant 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>