Manifest V3扩展如何在当前标签URL未授权时禁用popup弹窗

权限匹配现成API #

不需要手动将通配符转正则，Chrome 原生提供了chrome.permissions.contains()方法，可以直接校验当前URL是否匹配Manifest中声明的host_permissions规则，自动处理通配符、路径匹配逻辑：

const isSiteAllowed = await chrome.permissions.contains({
  origins: [currentTab.url]
});

该方法返回布尔值，完全对齐Manifest的匹配规则，不需要额外处理格式。

禁用Popup的两种实现方案 #

方案1：动态禁用Popup（推荐）

在Service Worker（背景脚本）中监听标签切换、页面更新事件，动态设置Popup路径为空，用户点击扩展图标时会直接无响应，还可以配合切换灰度图标提示用户不可用：

async function updatePopupState() {
  const [currentTab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (!currentTab?.url) return;

  const isAllowed = await chrome.permissions.contains({
    origins: [currentTab.url]
  });

  // 允许的站点设置正常Popup，否则设为空字符串禁用弹出
  await chrome.action.setPopup({
    popup: isAllowed ? "popup.html" : ""
  });
  // 可选：切换图标状态提升感知
  await chrome.action.setIcon({
    path: isAllowed ? "icon.png" : "icon-disabled.png"
  });
}

// 绑定触发事件
chrome.tabs.onActivated.addListener(updatePopupState);
chrome.tabs.onUpdated.addListener(updatePopupState);

方案2：Popup内部判断处理

如果不需要完全禁用弹出，也可以在Popup的入口脚本中做校验，不符合条件直接关闭窗口或者展示不可用提示：

// popup.js 入口逻辑
document.addEventListener('DOMContentLoaded', async () => {
  const [currentTab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const isAllowed = await chrome.permissions.contains({
    origins: [currentTab.url]
  });

  if (!isAllowed) {
    // 选项1：直接关闭Popup
    window.close();
    // 选项2：展示不可用提示
    // document.body.innerHTML = '<p>当前站点不支持该扩展使用</p>'
    return;
  }

  // 正常的Popup初始化逻辑
})

内容的提问来源于stack exchange，提问作者Faust