我正在尝试为 Chrome 创建一个类似于 Google Reader 的浏览器操作扩展，以便与我有权访问其 API 的不同 RSS 阅读器一起使用。这会在浏览器操作中产生 X 个链接，每个链接都需要使用 API 指定的 URL 打开一个新选项卡。
但是，每当单击链接时，我都会收到以下错误消息:
“拒绝执行 JavaScript URL，因为它违反了以下内容安全策略指令:“script-src 'self' chrome-extension-resource:”。”
我一直在阅读主要出现在内联脚本上的错误消息，但是我没有任何明确的 onLoads、内联脚本标签等。
list .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>
这是否隐含地创建了一个内联脚本，或者我是否以其他方式搞砸了它？
最佳答案
虽然原因有点不清楚，但我确实把事情搞砸了。原来罪魁祸首是“BANNER”。 Chrome 将 javascript:void(0) 调用定义为内联脚本调用。将 href 切换为“#”删除了错误消息。没有打开选项卡的原因是尝试向在 (ajax) 方法 getJSON() 中异步创建的组件添加行为，此时尚未完成。快速移动循环解决了这个问题，现在一切都按预期工作了。
关于javascript - 没有内联脚本，仍然得到 "Refused due to Content Security Policy directive: "script-src 'self' "，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17918149/