1

我正在尝试为 Chrome 创建一个类似于 Google Reader 的浏览器操作扩展，以便与我有权访问其 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、内联脚本标签等。

清单.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>

这些是否隐含地创建了一个内联脚本，或者我是否以其他方式将其搞砸了？

4

1 回答 1

4

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

于 2013-08-30T12:16:43.630 回答