How to create a chrome extension with Angular 2 RC1

Question

I am trying to create a DevTools Page extension in chrome with angular 2 RC1 but i found some problems to do it. In previous versions of angular (beta-7) i don't have this type of problems.

I think the problems they are related with some cross origin request (XMLHttpRequest) in the Zone.js file or because there exist some violations of content / restrictions of chrome extensions.

Someone had a problem of this kind?

For angular 2 app i use to test the panel the tour of heroes tutorial of angular. And the configuration of the remaining files is more or less the following:

(manifest.json)

...
"content_security_policy": "script-src 'self'; object-src 'self'",   
"minimum_chrome_version": "10.0",
"devtools_page": "devtools/devtools.html",

(devtools.js)

chrome.devtools.panels.create("Heroes Panel","icon.png","index.html",null);

PS: I am newbie in this new world of angular. :shy: Thanks for the help possible!

EDITED. These are the mistakes that i got in the console:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-G0mTaF6bWvyc4n9GAJfTdnuzxv4B+t1WU0aL2FBX94A='), or a nonce ('nonce-...') is required to enable inline execution.

For angular2 beta 17 see here working fine https://github.com/MrPardeep/Angular2_typescript_ChromeExtension — Pardeep Jain, May 31 '16 at 06:35
Error messages would probably be helpful in tracing the issues. You can [debug Dev Tools panels while they are detached](http://stackoverflow.com/a/27661701/934239). — Xan, May 31 '16 at 13:55
I think you need to wait until offline template compiler is available. It is supposed to solve the CSP problems. — Günter Zöchbauer, Jun 15 '16 at 04:29

score 1 · Accepted Answer · answered Jun 15 '16 at 02:19

This problem is chrome extension content security policy. You can see the doc https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing-inline-script

if you have inline script in your html

<script>// js code</script>

change to

<script src="xxx.js"></script>

How to create a chrome extension with Angular 2 RC1

1 Answers1