There a few posts about fixing the Tutorialzine How To Build a Chrome Extension that we put together already. If you’ve followed these posts to this point, you probably just uploaded your chrome extension to find the popup now pops up, but doesn’t show any of the expected contents. It probably looks something like this.
The RSS Feed from Tutorialzine with their newest articles is missing. You should inspect the chrome extension’s javascript console to see if there’s any errors going on with the javascript code. This is usually my first step in debugging any chrome extension. To open the console, you should right click on the extension icon and click “Inspect Popup”.
This should open up the chrome developer tools. Make sure you click on console in the top right of this window. When you do this, this will bring up the developer console. Any errors will show on the bottom of this screen. Quickly, we notice that there is an error in the extension and it looks like it relates to the Yahoo API call and something having to do with security policies.
Here is the exact error from that screen. Refused to load the script 'https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20feed%20WHER…at=json&callback=jQuery111109977134324144572_1412250033464&_=1412250033465' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". This error will probably differ slightly from your screen. The commonalities should be the refused to load the script and because it violates the following Content Security Policy directive: "script-src' self chrome-extension-resource. What this tells us is there is something wrong with content security policies associated with this chrome extension.
You get this error because Google stepped up its security efforts in Chrome Extensions since the Tutorialzine article was written. When the tutorial was originally written, the extension worked in its current state. To make this work now, we need to add an extra line in the manifest.json file to allow our script to call the Yahoo API it uses. We also need to change the url we call from Yahoo to https because Google’s security policy also changed so you can only call SSL encrypted pages that start with https.
Heres’ the fix.
Add this line to the manifest.json file: "content_security_policy": "script-src 'self' https://query.yahooapis.com/; object-src 'self'",
Change the url in script.js to https from html.
Old Version (approximately on line 11): $.get("http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?",function(msg){
Change that to: $.get("https://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?",function(msg){
Note: Google also changed security policies to not allow inline javascript. If you are trying to do something like <script>alert('test')</script>, it’s not going to work and will cause an error like we fixed above.
To learn more about the Content Security Policies, you should check out the Content Security Policy specification , and the “An Introduction to Content Security Policy” article on HTML5Rocks.
| [xyz-ihs snippet=”Fixing-the-Tutorialzine-Chrome-Extension-Tutorial-Series-of-Posts”] |