javascript - 如何在 Chrome 扩展中将 URL 与片段标识符匹配？

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 }中片段标识符#之后的部分不会被处理，引用https://developer.chrome.com/extensions/events#property-UrlFilter-hostEquals .

它说:

Matches if the URL (without fragment identifier) matches a specified regular expression. Port numbers are stripped from the URL if they match the default port number. The regular expressions use the RE2 syntax.

因此，也许 pageUrl 将登录页面和工作页面视为相同的 URL。

有什么方法可以识别这两个网址吗？

谢谢!

Answer 1

恐怕 declarativeContent API 根本无法执行您所要求的操作。

您应该探索替代选项，例如注入(inject) content script并从那里检查页面的状态；然后，您可以向后台脚本发送消息以启用/禁用页面操作。

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

请注意，当页面在这些状态之间转换时，可能不会发生实际导航(而是发生历史状态更改)；在这种情况下，您需要显式隐藏页面操作。