如何将URL与Chrome扩展中的片段标识符匹配

Question

我正在尝试使用以下代码来区分vSphere登录页面和工作页面的URL。

vSphere登录页面的URL看起来像这样：

https://0.0.0.0/vsphere-client/?csp

和登录后的工作页面如下：

https://0.0.0.0/vsphere-client/?csp#extensionId%3Dvsphere.core.controlcenter.shortcutsView

所以，我想在登录页面上显示我的扩展图标，而不是在工作页面上显示。

我尝试了以下代码，但它不起作用，我的意思是该图标可在这两个URL上可用：

chrome.runtime.onInstalled.addListener(function () {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { querySuffix: 'csp' },
          })
        ],
        actions: [new chrome.declarativeContent.ShowPageAction()]
      }
    ]);
  });
});

对线：

pageUrl: { querySuffix: 'csp' },

我还尝试了$到URL末端的正则等级，但无效：

pageUrl: { urlMatches: 'csp$' },

我知道片段标识符#之后的部分不会在pageUrl: { xxx },中进行处理。

它说：

匹配如果URL（没有片段标识符）匹配指定的 正则表达式。如果端口号被从URL中剥离 匹配默认端口号。正则表达式使用RE2 语法。

所以，也许pageUrl登录页面和工作页面相同的URL。

有什么方法可以在这里识别这两个URL？

谢谢！

Answer 1

我恐怕declarativeContent API根本无法做您的要求。

您应该探索替代选项，例如注入内容脚本并从那里检查页面状态；然后，您可以给您的背景脚本发送消息以启用/禁用页面操作。

作为一种不同的方法，您可以处理webNavigation API事件以跟踪URL更改并相应地更新页面操作可见性。

请注意，随着这些状态之间的页面过渡（历史状态变化发生），可能不会发生实际的导航；在这种情况下，您需要明确隐藏您的页面操作。