Content Security Policy: cannot load Google API in Chrome extension

I wrestled with this issue for the past 12 hours and finally got it to work. Why did it take so long? Because I got thrown off the trail multiple times. First, the false leads:

1. "Make it HTTPS" -- Doesn't matter. My Chrome extension now makes regular HTTP calls to a different domain and works just fine. (UPDATE: A little more clarification. The "make it https" myth is rooted in a similar problem people tend to have when it comes to SCRIPT loading. If you need to bring in an outside .js file, then yes, you need to modify your content_security_policy and include the proper hostname, which seems to only accept https. Keep in mind this is different than hitting an external hostname for something like REST services. As I stated before, this does not require modification of the content_security_policy, nor https.)

2. "Use JSONP in your JQuery AJAX calls" -- This might be a way to address cross-domain AJAX in normal web pages, but isn't necessary in a chrome extension due to the built-in Content Security Policy. Further, implementing JSONP sounds like a PITA because it requires server-side changes to handle the callback parameter (or something, I'm still not sure). In any case, not necessary.

3. "Mess with the Content Security Policy (CSP) string in your extension" - Under manifest version 2, the default string works fine: "script-src 'self'; object-src 'self'". You don't even have to explicitly specify it. What you need is a to include the domain you're trying to hit from the extension as a "permission" value.

The solution:

Remove all inline javascript from your extension. Get it into a separate .js file. I suspect that for most html files with any decent amount of javascript, this process will suck. Luckily for me, all I had was a body onload which I was able to move into a separate js file as window.addlistener onload event instead.

The page you really need to read to get past this issue is here: https://developer.chrome.com/apps/contentSecurityPolicy

Just make it use the https protocol instead. The error you're getting is regarding the Content Security Policy.

See the Relaxing the default policy section of the page. It mentions that you can only whitelist HTTPS, chrome-extension, and chrome-extension-resource.

I get this error [Report] when I run Augury chrome extension to debug an Angular app. Disable the extension and the error goes away. This won't help people who are writing extensions, but it may help those that aren't.

[Report Only] Refused to load the script 'https://apis.google.com/js/googleapis.proxy.js?onload=startup' because it violates the following Content Security Policy directive: "script-src 'report-sample' 'nonce-EagvF0PX1Z3gVL2Dka1hbA' 'unsafe-inline' 'strict-dynamic' https: http:". 'strict-dynamic' is present, so host-based whitelisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.