rxliuli blog
·
在 Chrome 插件中将 ArrayBuffer 从网页传递到 Devtools Panel
内容提要
本文介绍了如何在 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 插件时，跨线程通信是一个常见的挑战。本文中提到的 BroadcastChannel 和 postMessage 方法提供了一种有效的解决方案，尤其是在需要传递 ArrayBuffer 这样的复杂数据时。开发者应关注这些方法的使用场景，以便在未来的项目中更好地实现数据传递。
使用 Comlink 简化通信
文章中提到使用 Comlink 来简化 iframe 与 content-script 之间的通信。这种方法不仅减少了代码冗余，还提高了代码的可读性和可维护性。开发者在构建复杂的前端应用时，可以考虑使用类似的库来优化通信流程。
Devtools Extension 的局限性
尽管本文展示了通过 BroadcastChannel 和 postMessage 实现的成功案例，但仍然指出了 Devtools Extension 与网页之间通信的局限性。特别是 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 之间的通信，减少冗余代码。
