Question

我正在尝试使用angular 5构建chrome扩展。我使用Angular Material创建了一个基本的角度应用程序，它作为一个角度应用程序（我使用ng build检查）非常有效。我试图将应用程序移动为chrome扩展，因此我使用ng build创建代码，并添加了以下清单

{
   "name": "Getting Started Example",
   "version": "1.0",
   "description": "Build an Extension!",
   "background": {
      "scripts": ["runtime.js","polyfills.js","styles.js","vendor.js","main.js"],
      "persistent": false
    },
    "page_action": {
       "default_popup": "index.html"
     },
    "manifest_version": 2
}

后台脚本是角度编译器创建的脚本，用于呈现应用程序。我上传了我的扩展程序但是我收到了此错误

未捕获的EvalError：拒绝将字符串评估为JavaScript，因为 'unsafe-eval'不是以下允许的脚本源内容安全策略指令：“script-src'self'blob： filesystem：chrome-extension-resource：“。

这是什么意思？如何将我的角应用程序作为chrome扩展程序运行？

Answer 1

您无需在脚本中添加JS文件，只需添加dist文件夹的index.html文件的reffernce 它将自动添加所有必需的JS / CSS文件。

所以只需删除这行代码

"scripts": ["runtime.js","polyfills.js","styles.js","vendor.js","main.js"],

有关详细信息，请参阅此处 -

https://medium.com/@PardeepJain/build-your-own-chrome-extension-using-angular-4-ecedbd7404cc

Answer 2

您需要将此行添加到manifest.json中，以消除该错误：

 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

并删除以下代码行，因为这是不需要的：

"scripts": ["runtime.js","polyfills.js","styles.js","vendor.js","main.js"]

设置适当的工作流程是另一回事。每次进行更改时，都需要手动重建项目。这可能有点麻烦。

幸运的是，我为此工作流程创建了一个脚手架项目（自动监视文件，用于生产的版本并将其压缩等）

有关更多信息，请参见：https://github.com/larscom/angular-chrome-extension。

如何使用角度5来构建chrome扩展

2 个答案: