喜欢按钮无法在Chrome扩展程序中使用

Question

我在我的扩展程序中实现了一个简单的Facebook"赞"按钮.但是,它似乎没有起作用.

我正在使用iframe"喜欢"按钮的版本,因为我不需要任何额外的脚本.

<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>

首先,按钮确实显示正确和正确:

但是,单击它后,它将以红色显示"错误":

所以我想也许是因为清单版本2中添加了^{_{(一种愚蠢的)}}限制策略？因为如果我把它放在常规网页上就可以了.(单击"赞"按钮后显示"确认".)

有关如何解决此问题的任何想法？

Answer 1

//www.facebook.com/...是协议相对URL.当您在普通的http(s)站点上嵌入此类URL时,URL将解析为http(s)://www.facebook.com/....但是,在Chrome扩展程序中,它会解析为chrome-extension://www.facebook.com/.........

要解决此问题,请在URL前加上https:,即使用https://www.facebook.com/....

执行此操作后,由于内容安全策略,该按钮仍然不会显示.要获得所需的结果,您必须通过清单文件放宽CSP来嵌入Facebook :

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

(您也可以将http网站列入白名单,例如使用
"script-src 'self'; object-src 'self'; frame-src http://www.facebook.com"或
"script-src 'self'; object-src 'self'; frame-src http://www.facebook.com https://www.facebook.com")