how to use angular 5 to build chrome extension

Question

I am trying to build a chrome extension using angular 5. I created a basic angular app using Angular Material and it worked great as an angular app (I used ng build to check). I tried to move the application to be a chrome extension so I used ng build to create the code and I added the following manifest

{
   "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
}

the background scripts are the scripts the angular compiler created and are used to render the app. I upload my extension but I got this error

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".

what does it mean? how can I run my angular application as a chrome extension?

Answer 1

You need to add this line to the manifest.json for that error to go away:

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

and remove the following line of code, because that isn't needed:

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

To setup a proper workflow is a different story. Every time you make a change you need to rebuild the project manually. This can be some what of a hassle.

I have created a CLI to support such a workflow (auto watch files, build for production and zip it etc)

see: https://github.com/larscom/ng-chrome-extension for more information.