如何有效地管理 chrome 扩展中的消息传递和选项卡状态？

Question

目标

我正在尝试构建一个 chrome 扩展，将 UI 组件添加到使用 Next.js 作为其前端的现有第三方网站。

方法

内容脚本负责将 UI 组件注入网站。对于当前版本的扩展，我在网站新加载（例如初始加载、刷新等）时以及在网站上使用新容器扩展 DOM 树时添加一次 UI 组件。为此，我使用了一个在内容脚本末尾调用的匿名函数，该函数将 UI 组件注入 DOM 树中的相应位置。此外，

MutationObserver

查找 DOM 树中的更改，以便将 UI 组件注入到 DOM 树中动态和新创建的节点上。

当content script第一次被加载时，anonymus函数也会传递一个消息给扩展的service worker，让它知道接收端存在并且准备好接收来自service worker的消息。

网站使用客户端路由进行页面内容的后续更新。对于这种情况，我通过

chrome.webNavigation.onHistoryStateUpdated

API 在服务工作线程中创建一个 EventListener，只要发生客户端路由，它就会将消息传递到我的内容脚本，这样我就可以重新触发 UI 组件注入。

问题

问题是服务人员有时会在活动的选项卡上发送消息，但不是我希望将 chrome 扩展限制到的网站。在

manifest.json

中，我设置“匹配”字段以匹配我希望我的扩展程序被限制到的网站 URL 的模式。如何确保内容脚本仅在选项卡处于活动状态且域是网站之一时才发送消息？是否有消息传递概念来确保消息仅在“有效”选项卡和服务人员之间传递？

建议的解决方案

我正在考虑将

TabRegistry

函数作为服务工作者中的一个类来实现，就像服务注册中心一样处理属于目标第三方网站的选项卡及其状态。这是一种值得追求的方法吗？你有更好或更简单的想法，或者有避免

"Receiving end does not exist"

限制在某个

"match pattern"

的 chrome 扩展中的错误的经验吗？

我很高兴听到您的想法，并得到有关如何理解消息传递和与之相关的最佳实践的任何资源！