时间戳

首页 > 解决方案 > Chrome 扩展如何向网页公开自定义 API？

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

问题描述

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

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

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

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

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

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

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

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

Edt：看来我正在寻找类似于exportFunctionFirefox 扩展的东西。

标签： javascriptgoogle-chrome-extension

解决方案

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

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

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

推荐阅读