Question

我正在尝试为Chrome创建类似Google阅读器的浏览器操作扩展程序，以便与我可以访问API的其他RSS阅读器一起使用。这会在浏览器操作中生成X个链接，每个链接都需要打开一个带有API指定的URL的新选项卡。

但是，每当点击链接时，我都会收到以下错误消息： "Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:"."

我一直在阅读错误消息，因为它主要出现在内联脚本中，但是我没有任何明确的onLoads，内联脚本标记等。

的manifest.json：

{
"name": "A reader extension",
"version": "0.0.1",
"manifest_version": 2,
"description": "Desc",
"homepage_url": "homepage.com",
"icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
    "page": "src/bg/background.html",
    "persistent": true
},
"browser_action": {
    "default_icon": "icons/icon19.png",
    "default_title": "browser action",
    "default_popup": "src/browser_action/browser_action.html"
},

"permissions": [
    "cookies",
    "https://www.a-reader.com/api/1/*",
    "http://www.a-reader.com/go?*"
]}

背景action.js

   function list() {
    $.getJSON('https://www.a-reader.com/api/current/', function (data) {
        var items = [];

        $.each(data, function (key, val) {
            if (val.idx < val.max_idx) {
                var line = "<tr class='listEntry'>" +
                    "<td> " +
                    "<a class='listLink' id='ID' data-uri='URI' href='javascript:void(0)'>BANNER</a> " +
                    "</td> " +
                    "<td> [UNREAD_ENTRIES] </td>" +
                    "</tr>";
                items.push(line.replace("ID", val.slug).
                    replace("URI", "http://www.a-reader.com/boilerplate?=" + val.uri).
                    replace("NAME", val.name).
                    replace("BANNER", val.banner.
                    replace("UNREAD_ENTRIES", "" + val.unread;
            }
        });

        $('<table/>', {
            'class': 'entry-list',
            html: items.join('')

        }).appendTo('#mainPopup');

    });
}
function newTabForEntry(entryUrl) {
    chrome.tabs.create({'url': entryUrl});
}
document.addEventListener('DOMContentLoaded', function () {
    list();

    document.querySelectorAll('.entryLink', function (entryLinks) {
        for (var i = 0, len = entryLinks.length; i < len; i++) {
            document.getElementById(i.id).addEventListener('click', function (e) {
                console.info(e);
                newTabForEntry(e.target.dataset.uri);
            });
        }
    });
});

浏览器的action.html

<!doctype html>
<html>
<head>
    <style type="text/css">
        body {
            max-height: 450px;
            width: 200px;
            background-color: #F6F7F4;
            overflow: hidden;
        }

        a:link {
            color: #F6F7F4;
            text-decoration: none;
            font-weight: bold;
        }

        a:visited {
            color: #F6F7F4;
            text-decoration: none;
            font-weight: bold;
        }

        a:hover {
            color: #F6F7F4;
            text-decoration: none;
            font-weight: bold;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        #mainPopup {
            font-family: Helvetica, Ubuntu, Arial, sans-serif;
        }

        .listEntry {
            color: #F6F7F4;
            background-color: #483F36;
        }

        #banner {
            background-color: #483F36;
        }
    </style>
    <script type="text/javascript" src="../../js/jquery/jquery-2.0.0.js"></script>
    <script type="text/javascript" src="../../js/browser-action.js"></script>

</head>
<body>
<div id="banner">
    <img src="../../icons/reader-logo.png" width="124" height="25"/>
</div>

<div id="mainPopup">
</div>

</body>
</html>

是否有任何隐式创建内联脚本，或者是否以其他方式搞砸了？

Answer 1

虽然原因有点不清楚，但我确实搞砸了一些事情。原来罪魁祸首是“BANNER”。 Chrome将javascript：void（0）调用定义为内联脚本调用。将href切换为“＃”删除了错误消息。没有打开选项卡的原因是尝试在（ajax）方法getJSON（）中异步创建的组件添加行为，该方法尚未完成。快速移动循环解决了问题，现在事情按预期工作。

没有内联脚本，仍然因“内容安全策略指令而拒绝”：script-src'self'“

1 个答案: