Chrome 扩展如何向网页公开自定义 API？

Question

我的 Web 应用程序需要访问 UDP 套接字，这是 Web 不支持的，可能是出于安全原因。我决定创建一个 chrome 扩展程序，用户需要安装它才能使用我的 Web 应用程序，当然这样做需要他们自担风险。

这个想法是让我的扩展通过向网页添加一个全局变量（例如myExtension.udpSockets）来公开自定义 UDP 套接字 API。在尝试访问我的 UDP 套接字 API 之前，网页可以先检查 window.myExtension 是否存在（已安装扩展）。

当网页访问我的 UDP 套接字 API 时，我将创建一个弹出窗口以确保用户愿意让该网页访问 UDP 套接字并说明安全隐患。

我目前将我的代码放在内容脚本中，例如

function createUDPSocket() {
  // use chrome API
  console.log("Creating a UDP socket!");
}

我知道我可以通过修改 DOM 将 JavaScript 注入网页。

document.createElement("script");
// etc.

但是我怎样才能将我的 API 暴露给这个网页呢？它们位于不同的 JS 上下文中，因此这是行不通的。他们之间有什么交流方式吗？

---

Edt：看来我在 Firefox 扩展中寻找类似于 exportFunction 的东西。

Answer 1

Chrome 中没有 exportFunction/cloneInto，因此您必须使用 DOM 脚本元素和消息传递。

如果您只向一个或多个 URL 公开 API，您可以将安全的 extension API messaging via externally_connectable 直接用于后台脚本（它无法连接到内容脚本）。否则，对于 DOM 消息，我建议使用带有唯一甚至更好的随机事件 id 的 CustomEvent，绝对不是 postMessage，这样就没有其他代码可以窃听您的频道（假设您使用可以传递给使用 textContent 创建时的脚本元素，请参阅 method 2)。

在任何消息传递方法中，您的数据都必须与 JSON 兼容（数字、字符串、布尔值、空值以及由这些类型组成的对象/数组）。尝试发送不兼容的对象（例如函数或 DOM 元素或 Map 或类型化数组）可能会导致您的整个消息为空。