【浏览器扩展工程化】2.WXT、React与CSP：Sandbox、iframe踩坑

上期回顾：第一篇博文说了数据同步，主要是用到storage，storage和indexdb是浏览器扩展在储存数据是会用到的，storage用起来比indexdb要轻量许多，但受限于容量并不是很大，储存一下临时数据（主题、状态之类）还是不错的。

本章原计划打算说一下怎么构建浏览器扩展的主题设置功能，但是了解到在扩展配主题还是蛮少，所以说一下最近做小工具出现的问题。

为什么要使用沙盒？

chrome官方原文说：

在扩展程序中使用 eval 是危险的，因为它执行的代码可以访问扩展程序的高权限环境中的所有内容。

而扩展程序又能提供很多浏览器底层的API，这样容易出现安全问题。所以在V3版本，强制停用eval()、new Function之类的方法，但是又有很多的库使用了这些方法，为了兼容，他们就拿出了sandbox来提供一个封闭式的环境，运行这些依赖工程。

说到底，就是通过iframe来实现的，我们新建一个sandbox工程，和popup、sidepanel同一级别，假设我要展示sandbox，我就要在popup或sidepanel里面去使用iframe标签来引入sandbox.html（因为WXT编译sandbox之后会出现一个sandbox.html，和popup等一样）

就这么简单！

这就完了吗？当然没有，这样使用起来会遇到两个问题，官方示例和文档都没有使用工程化的方案，所以是不会写这两个问题的。

问题一：iframe无法显示sandbox工程

具体表现为空白/无资源就类似下面：