Search code examples
javascriptangulargoogle-chrome-extension

how to use angular 5 to build chrome extension

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?

Solution

  • You no need to add JS files in the script just add reffernce of index.html file of your dist folder It will automatically add all required JS/CSS files from there.

    so Just remove this line of code

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

    For more information refer here -