manifest.json 文件中的 CSP 问题答案

【问题标题】：Problems with CSP in the manifest.json filemanifest.json 文件中的 CSP 问题
【发布时间】：2013-05-09 03:03:12
【问题描述】：

我的第一个 GC 扩展的脚本在加载为 .crx 时不起作用。我检查了调试部分，这是我的错误：

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“script-src 'self' https://www.lolking.net/”。 popup.html:8

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“script-src 'self' https://www.lolking.net/”。 popup.html:9

所以我猜这个错误来自 manifest.json 文件：

{
"name": "LolKing Searcher",
"version": "1.1",
"manifest_version": 2,
"description": "Search your LoL profile",
 "content_security_policy": "script-src 'self' https://www.lolking.net/; object-src 'self'",
"permissions": [
    "tabs",
    "http://*/*/"
],

 "content_scripts": [
{
  "matches": ["http://*/*/","https://*/*/"],
  "js": ["popup.js"]
}
],

 "browser_action": {
    "default_title": "LolKing Searcher",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
}
}

每个建议都被很好地接受了！

【问题讨论】：

标签： google-chrome-extension manifest content-security-policy

【解决方案1】：

正如它在错误本身中所说的那样，该错误位于您的popup.html 文件中。 html 文件中不能有任何内联代码，其中包括像onclick="dosomething()" 这样的内联事件处理程序。将所有内联代码移至外部文件。

例子：

popup.html

<head>
  <script src="popup.js"></script>
</head>
<body>
  <input type="text" id="userText" placeholder="Enter Summoner's name"  />
  <input type="button" id="button" value="Search"/>
</body>

popup.js

window.onload = function(){
  document.getElementById("button").addEventListener("click",check,false);
};
function check(){
  var val = document.getElementById("userText").value;
  if(val != ""){
    var url="http://www.lolking.net/search?name=" + val;
    chrome.tabs.create({url:url});
  }
  else
    alert("Please enter a name");
}

您还需要删除您的 content scripts 部分，因为您正试图将弹出代码注入每个页面，这没有任何意义。

【讨论】：

很抱歉，我应该把这些内联事件处理程序移到 js 文件中吗？
这样的？ document.addEventListener("onclick", Check, false);
我试过了，但它不起作用 document.getElementById("button").addEventListener("onclick", Check, false);
你能再帮我一次吗？
@GinoGinuzzi 我更新了你的代码，如果有任何问题，请告诉我。