Search code examples
javascriptreactjsbrowser-extensionmanifest.json

React Web Extension Error: Refused to apply inline style because it violates the following Content Security

I have worked with React Js before but its my first time working with react for web extension.

My manifest.json file is:
{
  "manifest_version": 2,
  "name": "owl",
  "author": "zubayr",
  "version": "1.0.1",
  "description": "Testing!",
  "icons": {
    "16": "owl.png",
    "48": "owl.png",
    "128": "owl.png"
  },
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "permissions": ["storage"]
}

I am having a strange error: 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-1kri9uKG6Gd9VbixGzyFE/kaQIHihYFdxFKKhgz3b80='), or a nonce ('nonce-...') is required to enable inline execution.

Please let me know what went wrong.

My index.html file is:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <meta http-equiv="Content-Security-Policy" content="base-uri 'self'; object-src 'none'; script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; style-src 'self'">
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <style>
    .myDiv {
      border: 50px outset red;
      background-color: '#000000';
      text-align: center;
    }
    div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
</style>
    <title>Hoot</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
      <div class="myDiv" width="150" height="60">
        <h2>This is a heading in a div element</h2>
        <p>This is some text in a div element.</p>
      </div>
      <img src="owl.png" alt="owl" width="50" height="60">

    </div>

  </body>
</html>

On a separate note, when I run the extension in chrome in developer mode, the popup comes just as big as the image. I just can't seem to increase its height-width according to my wish. If possible, please let me know its solution as well.

Thanks in advance!

Solution

  • Chrome security prevents inline JS, which create-react-app generates. Try this

    In your React App, Please create a .env or add this to existing one

    INLINE_RUNTIME_CHUNK=false

    And then build your application (eg. yarn run build)

    Using this, no scripts, independent of size, are inlined.

    Check this pull request for more details https://github.com/facebook/create-react-app/pull/5354