背景

最近使用了 ZenFS 在浏览器中模拟文件系统，以在浏览器中像使用 node fs api 一样存储一些文件。但想要可视化的检查当前存储的文件时，却没有一个可以直观的工具来完成。所以就创建了一个 Chrome Devtools Extension ZenFS Viewer，以实现这个目标。在此过程中就遇到了如何传递 ArrayBuffer 从网页到 devtools panel 线程的问题，一些尝试如下。

browser.devtools.inspectedWindow.eval

首先尝试了最简单的方法，browser.devtools.inspectedWindow.eval 可以在网页执行任意代码并得到结果，例如

1

browser.devtools.inspectedWindow.eval(`__zenfs__.readdir('/')`)

然而 inspectedWindow.eval 并不支持 Promise 返回值，例如下面的表达式无法得到 Promise 结果

1

browser.devtools.inspectedWindow.eval(`await __zenfs__.promises.readdir('/')`)

同样的，也无法支持 ArrayBuffer。所以这个显而易见的 API 被放弃了。

1
2
3

browser.devtools.inspectedWindow.eval(
  `await __zenfs__.promises.readFile('/test.png')`,
)

chrome.runtime.sendMessage

接下来就是思想体操的时候了，一开始考虑的方案就是通过 devtools panel =>...