How to enable inline execution (chrome extension)

Question

I am trying to create a chrome extension for learning purposes, but I can't get past the content security policy for some reason. When I tried to write javascript inline, I got an error saying I needed to use sha hashing or nonce to enable the execution of my inline code. I looked through the chrome documentation and tried to use a sha256 hash of my content.js file, but for some reason I still get the same error in the same place (Error appears on line with the find button in popup.html file). Here is my manifest file:

{
"manifest_version": 2,
"name": "First Extension",
"version": "0.1",
"browser_action": {
  "default_popup": "popup.html"
},
"permissions": [
  "activeTab"
],
"content_scripts": [
    {
      "matches": [
      "https://*/*"
    ],
    "js": ["content.js"]
  }
],
"content_security_policy": "default-src 'self'; script-src 'self' <my domain> 'sha256-<hash of content.js in sha256, base 64>'; style-src * 'unsafe-inline'; img-src 'self' data:; connect-src <my domain>;"
}

My popup.html file:

<!doctype html>
<html>
  <head>
    <title>Yelp Popup</title>
      <script src = "content.js"></script>
  </head>

  <body>
    <div style = "height: 500px; width: 300px;">
      <h1>Find yelp reviews</h1>
      <button>Find</button>
    </div>
  </body>

</html>

And my content.js file:

function getReviews() {
fetch(<my domain>)
  .then((response) => {
  return response.json();
})
  .then((myJson) => {
  console.log(myJson);
});
}

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

I'm pretty new to this so any help/advice would be greatly appreciated. There must be something I'm missing with how to use the sha hash to allowlist my code, but I've looked over the chrome extension documentation several times and I still can't figure out what it is.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src *unsafe-inline* — Taplar, Jan 03 '20 at 17:57

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

You're looking at the wrong console: the error list on chrome://extensions page isn't cleared automatically, it accumulates all errors until you clear the list manually in the UI.

the browser_action popup is a separate window so it has a separate console: right-click inside the popup then click "inspect"
the browser_action popup is also a separate document + window not related to the web pages in browser tabs so use a different js file there: popup.js, for example.

^{Related: How to access the webpage DOM rather than the extension page DOM}
remove content_scripts section
remove content_security_policy section and use a separate popup.js, more info
to fetch URLs in the context of the extension popup, which has its own chrome-extension:// URL, you'll need to add a valid URL pattern for <my domain> in "permissions", see Cross-Origin XMLHttpRequest in extensions documentation.

How to enable inline execution (chrome extension)

1 Answers1