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?


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 –

Answered By – Pardeep Jain

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.