帶有 React 的 Chrome 擴展清單 v3

Question

我正在尋找使用 manifest v3 創建一個 chrome 擴展來使用腳本權限。 我使用 v2 創建了一個 React ui，我可以從 Chrome 錯誤中復制狡猾的 SHA 密鑰，並使其允許它在我的瀏覽器中運行。 現在在 v3 中，content_security_policy 已更改為 object，並且在此版本中，我無法讓 Chrome 顯示我的擴展程序。 你知道如何讓 chrome 擴展與我的 react 應用一起玩嗎？

收到錯誤：

Failed to load extension
File
\\wsl$\Ubuntu\home\peterpoliwoda\Develop\git\react-plugin-typescript\build
Error
'content_security_policy.extension_pages': Insecure CSP value "'sha256-m1InakbNccQ3GMWQxjDkpe3xtz7EYSSUcfxN6JYBtDk='" in directive 'script-src'.
Could not load manifest.

Answer 1

感謝@Neea 提供幫助。 問題確實出在 React 在構建階段index.html文件中的內聯腳本上。 解決方法是將其放在單獨的腳本文件中。 聽起來有點反直覺，但它確實有效！

在 index.html 我需要替換這個：

<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

<script>!function(e){function t(t){for(var n,i,a=t[0], 
...
</script>

<script src="/static/js/2.828ba7e0.chunk.js"></script>
...

使用一個簡單的腳本文件，例如與動態生成的塊的 rest 一起放在static/js/inline.js文件中：

<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

<script src="/static/js/inline.js"></script>

<script src="/static/js/2.828ba7e0.chunk.js"></script>
...

而已。 我需要編寫一個構建后的腳本，它現在會自動執行此操作，因為每次都執行此操作似乎有點麻煩。

那是主要問題。 該錯誤實際上與我將 CSR 值留在manifest.yml文件中的事實有關：

...
"content_security_policy": {
  "extension_pages": "script-src 'self' 'sha256-m1InakbNccQ3GMWQxjDkpe3xtz7EYSSUcfxN6JYBtDk='; object-src 'self'"
  },
},
...

帶有 React 的 Chrome 擴展清單 v3

問題描述

1 個解決方案

解決方案1
0 已采納 2021-12-06 09:02:24

帶有 React 的 Chrome 擴展清單 v3

問題描述

1 個解決方案

解決方案1 0 已采納 2021-12-06 09:02:24

解決方案1
0 已采納 2021-12-06 09:02:24