Widget Not Working


#1

Ok. I have made a twitter widget for the account ‘@Louie5SOS’. I am trying to embed it into a Google Chrome extension which i am coding. Unfortunately, I am able to view the widget on an ordinary HTML page but no in the extension.

The extension code is here: http://pastebin.com/w50G7CvP


As you can see, the code IS embedded in the extension html document, it is just not displaying! Please can somebody help me with this?

Regards,
Lou


#2

Can you verify that widgets.js is being loaded?

Also it looks like there are 2 console errors, would you mind sharing them?


#3

Hey, How would you like me to do this? In the Chrome Extension it looks like it is loaded as it says ‘Tweets by @Louie5SOS’. I would assume that means it is loading? How would you like me to get the console errors?


#4

Hey, How would you like me to do this? In the Chrome Extension it looks like it is loaded as it says ‘Tweets by @Louie5SOS’. I would assume that means it is loading?

Nope, that’s the fallback HTML, so that’s what you’d see if widgets.js wasn’t loading properly. If you click on the “Network” panel in the debugger, there should be an entry for widgets.js. If it’s not there (or if the download was not successful), that would explain why the widget is not showing up.

How would you like me to get the console errors?

If you click the red circle with an X in it (see below), that should show you the errors.


#5

The feed.js thing isn’t a problem, thats to do with my code and what i want to include with it, however the other error I am not sure what it is or means!

Lou


#6

Are you loading widgets.js? Seems like you might not be. Look to see if your HTML includes one of the following:

<script src="https://platform.twitter.com/widgets.js"></script>
<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
 
  return t;
}(document, "script", "twitter-wjs"));</script>

#7

Hi Jake,

widget.js IS NOT included in the code. I just copied to code from twitter.com directly under create new widget.


#8

widgets.js is required for twitter widgets. Just throw the following line of code in your HTML and things should work:

<script src="https://platform.twitter.com/widgets.js"></script>

#9

This is what I get


#10

Looks like you’re running into an issue with the default CSP config for Chrome extensions. A quick google search turned this up: https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing. Based on my quick reading of the document, I believe you’ll want to add the following to your extension’s manifest.json:

"content_security_policy": "script-src 'self' https://platform.twitter.com; object-src 'self'"

#11

I just get this still?


#12

Doesn’t look like your CSP config change is getting picked up. At this point this is a Chrome extension problem, not a widgets.js problem so I won’t be able offer more assistance as I’m not familiar with Chrome extension development. I’d suggest thoroughly reading the Chrome extension CSP document I linked to earlier and if you can’t find your answer there, perhaps ask a question on StackOverflow.


#13