Chrome扩展仅申请activeTab权限时匹配有效URL请求运行contentScript的方案

首先明确Chrome扩展的权限边界：不申请tabs权限的前提下，后台脚本默认无法读取任意标签页的url属性。activeTab权限不会自动授予，必须由用户主动触发扩展交互（点击扩展图标、使用扩展快捷键、选择扩展上下文菜单选项）时，才会临时授予当前激活标签页的访问权限，此时才可读取标签页URL、注入脚本。
根据你的需求，推荐两种实现方案：

方案1：用户点击扩展图标时判断注入（最符合activeTab设计逻辑） #

这是最合规的实现方式，不会触发额外权限申请提示，也不需要多余的内容脚本注入。

1. 首先配置manifest.json：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "action": {}
}

2. 后台服务 worker 代码：

const validUrls = ["*.example.com", "*.foo.com"]

// 域名匹配工具函数
function matchesValidDomain(url, validPatterns) {
  try {
    const { hostname } = new URL(url)
    return validPatterns.some(pattern => {
      const regexPattern = pattern.replace(/\*/g, '[^.]+')
      return new RegExp(`^${regexPattern}$`).test(hostname)
    })
  } catch {
    return false
  }
}

// 监听扩展图标点击事件
chrome.action.onClicked.addListener(async (tab) => {
  // 用户点击后activeTab权限激活，可正常读取tab.url
  if (matchesValidDomain(tab.url, validUrls)) {
    // 直接注入目标内容脚本
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ["contentScript.js"]
    })
  } else {
    // 可选：给用户提示当前站点不支持
    chrome.action.setBadgeText({ text: "不支持", tabId: tab.id })
    setTimeout(() => chrome.action.setBadgeText({ text: "", tabId: tab.id }), 2000)
  }
})

方案2：打开匹配站点时主动提示用户授权 #

如果需要用户打开符合条件的站点时自动提示可用，不需要tabs权限，仅需新增一个极小的全局检测内容脚本：

1. 配置manifest.json：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["detector.js"],
      "run_at": "document_start"
    }
  ]
}

2. 新增detector.js全局检测脚本：

const validUrls = ["*.example.com", "*.foo.com"]
function matchesValidDomain(url, validPatterns) {
  try {
    const { hostname } = new URL(url)
    return validPatterns.some(pattern => {
      const regexPattern = pattern.replace(/\*/g, '[^.]+')
      return new RegExp(`^${regexPattern}$`).test(hostname)
    })
  } catch {
    return false
  }
}
// 当前站点匹配时，给后台发消息
if (matchesValidDomain(window.location.href, validUrls)) {
  chrome.runtime.sendMessage({ type: "VALID_SITE_DETECTED" })
}

3. 后台服务 worker 接收消息做响应提示：

chrome.runtime.onMessage.addListener((msg, sender) => {
  if (msg.type === "VALID_SITE_DETECTED") {
    // 示例：扩展图标显示绿色可用标记
    chrome.action.setBadgeBackgroundColor({ color: "#2ecc71", tabId: sender.tab.id })
    chrome.action.setBadgeText({ text: "可用", tabId: sender.tab.id })
  }
})

原有代码问题说明 #

你之前的代码会死循环，是因为在没有权限的情况下反复调用chrome.scripting.executeScript，会反复触发权限申请弹窗，同时tabs.onUpdated事件会被权限弹窗的状态变化反复触发，形成死循环。放弃在后台通过tabs.onUpdated主动读取tab.url的思路即可解决。

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