Like button not working in a Chrome extension

facebook, google-chrome-extension, javascript

Solution

`//www.facebook.com/...` is a protocol-relative URL. When you embed such a URL on a normal http(s) site, then the URL resolves to `http(s)://www.facebook.com/...`. However, in a Chrome extension, it resolves to `chrome-extension://www.facebook.com/...`...

To fix this issue, prefix the URL with `https:`, i.e. use `https://www.facebook.com/...`.

After doing that, the button will still not show up because of the Content Security Policy. To get the desired result, you have to allow Facebook to be embedded, by relaxing the CSP via the manifest file:

"content_security_policy": "script-src 'self'; object-src 'self'; frame-src https://www.facebook.com",

(you can also whitelist http sites, e.g. using `"script-src 'self'; object-src 'self'; frame-src http://www.facebook.com"` or `"script-src 'self'; object-src 'self'; frame-src http://www.facebook.com https://www.facebook.com"`)

Problem

I have implemented a simple Facebook "Like" button in my extension. However, it does not appear to be working. I am using the `iframe` version of the "Like" button just because I won't need any extra scripts. ``` <iframe src="//www.facebook.com/plugins/like.php?href=[dummy_text]&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;font&amp;blah..." scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe> ``` At first, the button does show up nicely and correctly: However, after you clicked it, it will say "Error" in red: So I am thinking maybe it is because of the (kind of stupid and) restricted policies added in manifest version 2?; since it works if I put it on a regular webpage. (It says "Confirm" after I click the like button.) Any idea on how to fix this?

Original source

Related problems