Question

我想在我的Chrome扩展程序的popup.html中显示赞和分享按钮。我收到了这个错误：

为了纠正此错误，我执行了以下操作：

在清单

CSP

按照建议in this post

但是，这没有任何区别，我仍然得到同样的错误。

代码：

popup.html：

<!DOCTYPE html>
<html>
<head>
    <title>Extension Name</title>
    <style>
body {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 90%;

      }

      #news {
      width: 400px;
      height: 300px;
      }
      table {
      width: 100%;
      }
      table td, td * {
      vertical-align: top;
      }
      a {
      text-decoration: none;
      color: #000000;
      }
    </style>
    <base target="_blank">
    <script src="jquery-2.1.4.js"></script>
    <script src="facebook-2.4.js"></script>
    <script src="popup.js"></script>
</head>

<body>
    <div id="news">
        Statement:<br>

        <table id="newstable"></table>
    </div><iframe class="sandbox active" height="200" id="sandboxFrame" name=
    "sandboxFrame" src="sandbox.html" style="" width="300"></iframe>
</body>
</html>

popup.js：

document.addEventListener('DOMContentLoaded', function() {
    $.get("http://example.com/feed/", function(data) {
        $(data).find("item").each(function() {
            var e = $(this);
            $("#newstable").append("<tr><td><a href='" +
                e.find("link").text() + "'>" + e.find(
                    "encoded").text().replace("<p>",
                    "").replace(/style.*/,
                    "style='width: 80px; height: 80px; float: left; margin-right: 5px;'/>"
                ) + "</a></td><td><a href='" + e.find(
                    "link").text() + "'>" + e.find(
                    "title").text() + "<br>" + e.find(
                    "description").text().replace(
                    /<p>The post.*/, "").replace(
                    "<p>", "").replace("</p>", "") +
                "</a></td></tr>");
        });
    });
});

的manifest.json：

{
    "manifest_version": 2,
    "name": "Extension Name",
    "description": "Description",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Extension name"
    },
    "permissions": ["http://example.com/", "http://*.facebook.com/*", "tabs"],
    "sandbox": {
        "pages": ["sandbox.html"]
    },
    "content_security_policy": "script-src 'self' https://connect.facebook.net; object-src 'self'"
}

Facebook的2.4.js：

window.fbAsyncInit = function() {
    FB.init({
        appId: 'APP_ID',
        xfbml: true,
        version: 'v2.4'
    });
};
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

sandbox.html：

<!DOCTYPE html>
<html>
<head>

    <script src="facebook-2.4.js"></script>

    <title></title>
</head>

<body>
    <div class="fb-like" data-share="true" data-show-faces="true" data-width=
    "450"></div>
</body>
</html>

即使在清单和沙盒中添加CSP指令后，Chrome扩展中的CSP错误也是如此

0 个答案: