Chrome extension policy error: Refused to execute inline event handler because it violates the following Content Security Policy directive

Question

I'm developing a chrome extension to do a simple task, except I have spent most of the time on one line of html code to figure out how to properly give it the correct permissions, I have tried to do it but I do not know what to actually put.

The error I get when trying to run the javascript:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' https://apis.google.com ". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

This is what I have attempting to fix the policy error:

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

I tried putting the content-security-policy in the manifest file, and I tried other content in the code above.

All my code ( I know I should not do this but I do not know what is causing this issue ):

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});}

MANIFEST:

{
  "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"
  ]
}

Answer 1

I figured it out. It was because I had an inline execution.., instead of manually doing onclick="myFunction()" in html, I just listened to it through javascript!

Here is my updated code:

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>

Chrome extension policy error: Refused to execute inline event handler because it violates the following Content Security Policy directive

Question

1 answers

solution1
0 ACCPTED 2020-06-07 12:18:32

Chrome extension policy error: Refused to execute inline event handler because it violates the following Content Security Policy directive

Question

1 answers

solution1 0 ACCPTED 2020-06-07 12:18:32

solution1
0 ACCPTED 2020-06-07 12:18:32