"script-src 'self' blob: filesystem:" violation in my extension

I was making my own extension for a personalized override of the Chrome New Tab page, just for my own enjoyment and satisfaction. I tried to and I'm still pretty much a noobie on it, so pardon if I may have some info missing. When I loaded it on the browser for testing, it shown on errors this statement.

"Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-UrW32gwL1gpSrGGvHISi+RNWVtioOwgvhR8A/w6jzyc='), or a nonce ('nonce-...') is required to enable inline execution."

Anyways, here is my html code.

<!DOCTYPE html>

<! -- Hewo curious earthling, let's go for simplicity! -- >
 
<head>
    <meta name="viewport" content=
        "width=device-width,
        initial-scale=1.0" />
 
    <title>New Tab</title>
 
    <style>
        #clock {
            font-size: 64px;
            text-align: center;
       }

        #shortcuts {
            font-size: 18px;
            text-align: center;
            color: #000000;
       }

        #greetings {
            font-size: 32px;
            text-align: center;

        }
    </style>
</head>
 
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<html>
<div id="clock"></div>

<script nonce="8IBTHwOdqNKAWeKl7plt8g==">
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('clock').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>
<br>
<br>
<br>
<br>
    <div id="greetings">Good day, User!</div>
<br>
<br>
<br>
<br>
<div id="shortcuts"><a href="https://www.facebook.com/messages/t/" style="text-decoration:none">Messenger</a></div>
<div id="shortcuts"><a href="https://music.youtube.com" style="text-decoration:none">Youtube Music</a></div>
<div id="shortcuts"><a href="https://classroom.google.com" style="text-decoration:none">Classroom</a></div>
<div id="shortcuts"><a href="https://docs.google.com" style="text-decoration:none">Docs</a></div>
<div id="shortcuts"><a href="https://app.simplenote.com" style="text-decoration:none">Simplenote</a></div>
</body>
</body>
</html>

And here is my manifest code.

{
    "name": "simple",
    "description": "Personalized override of Chromium browsers' New Tab page, simplified.",
    "version": "1.0",
    "manifest_version": 2,
    "chrome_url_overrides": { "newtab": "index.html" }
}

What should I do, and where do you think I got things wrong?

Thanks in advance!

"script-src 'self' blob: filesystem:" violation in my extension

0 Answers