可以将AngularJS用于Chrome扩展程序的选项页面吗?

Mik*_*den 5 javascript google-chrome google-chrome-extension angularjs

对于我的Chrome扩展程序的选项页面,我想使用Angular.js(仅用于选项页面,而不是扩展程序的后台JS或内容脚本),但是在我的页面中包含它并执行以下操作:

<!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>
Run Code Online (Sandbox Code Playgroud)

...在开发工具控制台中抛出此错误,并且没有运行:

Error: Code generation from strings disallowed for this context
Run Code Online (Sandbox Code Playgroud)

我认为这是因为Angular正在尝试将标记写入页面或分配内联事件处理程序或运行内联JS的内容,这在Chrome扩展中是不允许的,所以有什么方法可以解决这个问题吗?例如,我可以告诉Angular避免以某种方式使用内联JS吗?

btf*_*ord 15

您可以manifest_version: 2通过在符合CSP的模式下指定角度运行来使用.只需将该ng-csp属性添加到<html>面板页面即可.

所以你的HTML会是这样的:

<!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>
Run Code Online (Sandbox Code Playgroud)