可以使用AngularJS一个Chrome扩展的选项页面? [英] Possible to use AngularJS for a Chrome extension's options page?

查看:239
本文介绍了可以使用AngularJS一个Chrome扩展的选项页面?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有关我的Chrome扩展的选项页,我想使用Angular.js(只为选项页,而不是扩展的背景JS或内容脚本),但包括它在我的页面,做这样的事情:

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

我想这是因为角度试图写入标签页或内联指定的事件处理程序或运行内嵌JS,其中的没有在Chrome扩展允许的,那么有没有解决这个办法?我可以告诉角度,避免使用内联JS不知何故,例如?

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?

推荐答案

您可以使用 manifest_version:2 通过指定在符合CSP模式下运行的角度。只需添加 NG-CSP 属性添加到&LT; HTML方式&gt; 在你的面板页

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.

所以,你的HTML会是这样的:

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>

这篇关于可以使用AngularJS一个Chrome扩展的选项页面?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆