rxliuli blog
·
在 Chrome 插件中将 ArrayBuffer 从网页传递到 Devtools Panel
💡
原文中文，约6400字，阅读约需16分钟。
📝
内容提要
本文介绍了如何在 Chrome 插件中将 ArrayBuffer 从网页传递到 Devtools Panel。作者创建了 ZenFS Viewer 工具，利用 BroadcastChannel 和 postMessage 方法实现了跨线程通信，成功解决了不同脚本间传递 ArrayBuffer 的问题。
🎯
关键要点
- 创建了 Chrome Devtools Extension ZenFS Viewer，以可视化检查存储的文件。
- 最初尝试使用 browser.devtools.inspectedWindow.eval 传递 ArrayBuffer，但不支持 Promise 和 ArrayBuffer。
- 考虑通过 chrome.runtime.sendMessage 进行中转通信，但同样无法传递 ArrayBuffer。
- 最终使用 BroadcastChannel 和 postMessage 方法实现跨线程通信，成功传递 ArrayBuffer。
- 注入的 content-script 负责对 iframe 暴露 API，并使用 comlink 简化通信。
- 在 Devtools 中注入两个 content-script，以创建 iframe 并获取数据。
- 尽管实现了通信，但仍然没有简单的方法替代 inspectedWindow.eval。
❓
延伸问答
如何在 Chrome 插件中传递 ArrayBuffer 到 Devtools Panel？
可以通过使用 BroadcastChannel 和 postMessage 方法实现跨线程通信，从而成功传递 ArrayBuffer。
ZenFS Viewer 工具的主要功能是什么？
ZenFS Viewer 工具用于可视化检查在浏览器中存储的文件，模拟文件系统的操作。
为什么不能使用 browser.devtools.inspectedWindow.eval 来传递 ArrayBuffer？
因为 browser.devtools.inspectedWindow.eval 不支持 Promise 和 ArrayBuffer 的返回值。
在实现 ArrayBuffer 传递时遇到了哪些问题？
遇到的问题包括无法通过 chrome.runtime.sendMessage 传递 ArrayBuffer，仅支持 JSON 值。
如何在 Devtools 中注入 content-script？
需要使用 browser.scripting.executeScript 方法来注入两个 content-script，一个用于创建 iframe，另一个用于主内容。
使用 comlink 的目的是什么？
使用 comlink 是为了简化 iframe 和 content-script 之间的通信，减少冗余代码。
➡️
