如何在V3版本的Chrome扩展中使用`eval`？

如今，Chrome扩展的开发者正在慢慢将他们的代码从V2迁移到V3，不幸的是，这并不总是一个简单的工作。

我看到开发者纠结的问题之一是他们应该如何迁移eval 。当我迁移我自己的扩展时也是如此，它到处都使用eval 。这是你在V3中得到的错误

Error in event handler: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

在V2中可以到处使用eval ，但在V3中你不能在任何地方使用它。但幸运的是，有一个解决方案可以解决这个问题，在这里有描述

不幸的是，所描述的解决方案是直接从V2中复制过来的，而且开箱后的效果并不理想。它描述了如何使用后台脚本内的iframe对你的eval 代码进行沙盒。在后台脚本中运行iframe解决方案在V2中是一个完美的解决方案，但在V3中不再是了，因为后台脚本是一个服务工作者。它不能创建iframe。所以，解决方案很简单，只要在其他地方创建iframe（除了内容脚本）。在我的例子中，我使用了我的弹出式html文件，并添加了以下html代码

<iframe src=”../sandbox.html” id=”sandbox” style=”display: none”></iframe>

其中sandbox.html包含执行的代码eval

<html>    <script>        window.addEventListener('message', async function (event) {            event.source.window.postMessage(eval(event.data), event.origin);        });    </script></html>

而且别忘了将sandbox.html 配置为真正的沙盒

"sandbox": {    "pages": [      "sandbox.html"    ]  }

这应该被添加到manifest.json文件中。

最后，与沙盒进行通信的代码。

const iframe = document.getElementById('sandbox');

就这样了，谢谢

如何在V3的chrome扩展中使用`eval`？(附代码）

如何在V3版本的Chrome扩展中使用`eval`？