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 github.com/MrPardeep/Angular2_typescript_ChromeExtension — Pardeep Jain
– Pardeep Jain, Commented May 31, 2016 at 6:35
Error messages would probably be helpful in tracing the issues. You can debug Dev Tools panels while they are detached. — Xan
– Xan, Commented May 31, 2016 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
– Günter Zöchbauer, Commented Jun 15, 2016 at 4:29

Jerry Lin · Accepted Answer · 2016-06-15 02:19:55Z

1

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>

answered Jun 15, 2016 at 2:19

Jerry Lin

261 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create a chrome extension with Angular 2 RC1

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related