Fatal编程技术网
  • javascript/
  • Javascript React Web扩展错误：拒绝应用内联样式，因为它违反了以下内容安全性

Javascript React Web扩展错误：拒绝应用内联样式，因为它违反了以下内容安全性

javascript reactjs

Javascript React Web扩展错误：拒绝应用内联样式，因为它违反了以下内容安全性,javascript,reactjs,browser-extension,manifest.json,Javascript,Reactjs,Browser Extension,Manifest.json,我以前使用过React Js，但这是我第一次使用React for web extension My manifest.json file is: { "manifest_version": 2, "name": "owl", "author": "zubayr", "version": "1.0.1", "descriptio

我以前使用过React Js，但这是我第一次使用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"]
}
我遇到了一个奇怪的错误：
拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script src'self'blob:filesystem:”。启用内联执行需要'unsafe inline'关键字、哈希（'sha256-1kri9uKG6Gd9VbixGzyFE/KAQIHIHYFDXFKKKHGZ3B80='）或nonce（'nonce-…'）。

请告诉我出了什么问题

我的
index.html
文件是：

<!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>


myDiv先生{
边框：50px红色；
背景色：'#000000'；
文本对齐：居中；
}
div{
高度：200px；
宽度：50%；
背景色：粉蓝色；
}
叫声
您需要启用JavaScript才能运行此应用程序。
这是div元素中的标题
这是div元素中的一些文本
另一方面，当我以开发者模式在chrome中运行扩展时，弹出窗口与图像一样大。我似乎无法按照我的意愿增加它的高度和宽度。如果可能的话，请让我知道它的解决方案

提前谢谢

Chrome安全性防止创建react应用程序生成的内联JS。试试这个

在React应用程序中，请创建一个
.env
，或将其添加到现有应用程序中

INLINE\u RUNTIME\u CHUNK=false

然后构建应用程序（例如，
纱线运行构建
）

使用这种方法，不会内联任何与大小无关的脚本

查看此拉取请求以了解更多详细信息

我没有得到它。你能详细解释一下吗？实际上，我在构建脚本中尝试了INLINE_RUNTIME_CHUNK=false，但这无助于您创建.env文件并将其添加到其中吗？是的。好的，现在开始工作了。我在package.json上犯了一个愚蠢的错误。我再也不会犯错误了。但还有一件事，我仍然没有一个正确的弹出窗口。它就像一个黑屏，中间写着“反应”，然后所有其他组件（如在index .html中所做的）在下面。我不能只看生成HTML的问题。但是我认为css肯定有一些问题。这和你的开发网站看起来一样吗？