Geek Answers Handbook

Can I use AngularJS for the Chrome extension settings page?

For my Chrome extension options page, I would like to use Angular.js (only for the options page, not for the background of the JS extension or content), but include it on my page and do 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 developer console and does not start anything:

 Error: Code generation from strings disallowed for this context

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

+4
source share
1 answer

You can use manifest_version: 2 , indicating that angular runs in CSP mode. Just add the ng-csp to the <html> in your panel page.

So your HTML will look 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>
+15
source

More articles:


All Articles