Chrome 扩展策略错误：拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令答案

【问题标题】：Chrome extension policy error: Refused to execute inline event handler because it violates the following Content Security Policy directiveChrome 扩展策略错误：拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令
【发布时间】：2020-09-26 04:58:53
【问题描述】：

我正在开发一个 chrome 扩展来完成一项简单的任务，除了我大部分时间都花在一行 html 代码上来弄清楚如何正确地赋予它正确的权限，我已经尝试过，但我不知道该放什么。

我在尝试运行 javascript 时遇到的错误：

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“script-src 'self' https://apis.google.com”。启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-...”）或随机数（“nonce-...”）。

这是我试图修复政策错误的原因：

<meta http-equiv = "Content-Security-Policy" content="script-src 'self' data: https://apis.google.com 'unsafe-inline' 'sha256-base64EncodedHash'">

我尝试将 content-security-policy 放在清单文件中，并在上面的代码中尝试了其他内容。

我所有的代码（我知道我不应该这样做，但我不知道是什么导致了这个问题）：

HTML：

<html>
<head>
    <title>Tracillion</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css">
    <meta http-equiv = "Content-Security-Policy" content="script-src 'self' data: https://apis.google.com 'unsafe-inline' 'sha256-base64EncodedHash'">
    <script type = "text/javascript" src = "popup.js"></script>
</head>
<body>
    <h1 class = "header">Enter what you would like to search!</h1>
    <div class = "line"></div>
    <input class = "input" id = "input">
    <button type = "submit" class = "button" onclick="loadSearch()">Search</button>
</body>

JAVASCRIPT：

function loadSearch() {
var inputResult = document.getElementById("input").value;
var final = 'https://www.google.com/search?q=' + encodeURI(inputResult + ' site:v3rmillion.net');
chrome.tabs.create({url: final});}

清单：

{
  "name": "bruh",
  "description": "bruh moment",
  "version": "1.0",
  "background": {
    "scripts": [
      "popup.js"
    ]
  },
  "manifest_version": 2,

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

  "permissions": [
    "tabs"
  ]
}

【问题讨论】：

也许这会有所帮助：stackoverflow.com/a/30904690/863110
不幸的是，我无法从该链接中挽救任何可以帮助我的东西。

标签： javascript html json google-chrome

【解决方案1】：

我想通了！那是因为我有一个内联执行......而不是在html中手动执行onclick =“myFunction（）”，我只是通过javascript来听它！

这是我更新的代码：

JAVASCRIPT：

function loadSearch() {
 var inputResult = document.getElementById("input").value;
 var final = 'https://www.google.com/search?q=' + encodeURI(inputResult + ' 
 site:v3rmillion.net');
 chrome.tabs.create({url: final});
}

document.addEventListener('DOMContentLoaded', function() {
 document.querySelector('button').addEventListener('click', loadSearch, false);
}, false)

HTML：

<html>
<head>
    <title>Tracillion</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css">
    <script type = "text/javascript" src = "popup.js"></script>
</head>
<body>
    <h1 class = "header">Enter what you would like to search!</h1>
    <div class = "line"></div>
    <input class = "input" id = "input">
    <button type = "submit" class = "button">Search</button>
</body>

【讨论】：