Manifest V3版Chrome扩展如何避免在chrome://页面运行报错

你遇到的两个报错的原因分别是：

1. ReferenceError: window is not defined 是因为 Manifest V3扩展的后台运行在Service Worker环境中，没有window全局对象，你尝试用window.location获取当前浏览页面地址的逻辑本身就不成立，你需要判断的是点击图标时当前激活标签页的URL，而非后台自身的地址。
2. 你把chrome.action.onClicked监听器注册放在if判断中的写法也不合理：监听器只需要在后台脚本初始化时注册一次，URL校验逻辑应该放在点击触发后的回调内部执行。

以下是两个无需第三方依赖的可行方案：

方案1：点击时校验URL + 异常捕获（简单快捷） #

第一步：配置manifest.json权限 #

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "activeTab",
    "scripting",
    "tabs" // 如需获取标签页URL需要该权限，若只针对特定站点可替换为对应host权限，如 "*://*.example.com/*"
  ],
  "action": {}
}

第二步：修改background.js代码 #

// 全局只注册一次点击监听器
chrome.action.onClicked.addListener(async (tab) => {
  // 校验当前标签页URL是否符合要求，这里示例只允许http/https开头的普通页面，排除chrome://等特殊页面
  const isSupportedPage = /^https?:\/\//.test(tab.url ?? '');
  // 也可以自定义匹配规则：isSupportedPage = tab.url?.includes('你需要的站点特征') ?? false

  if (!isSupportedPage) return;

  // 执行脚本添加异常捕获，作为双重保险避免抛出未处理错误
  try {
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ['iconClicked.js']
    });
  } catch (e) {
    console.log('当前页面不支持注入脚本：', e.message);
  }
});

方案2：用declarativeContent自动控制图标状态（体验更优） #

该方案会在符合要求的页面自动启用扩展图标，不符合要求的页面图标直接置灰无法点击，从根源避免用户误触，也不需要申请tabs权限，隐私提示更友好。

第一步：配置manifest.json权限 #

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "activeTab",
    "scripting",
    "declarativeContent" // 新增该权限
  ],
  "action": {
    "default_disabled": true // 默认禁用图标
  }
}

第二步：修改background.js代码 #

// 扩展安装时注册页面匹配规则
chrome.runtime.onInstalled.addListener(() => {
  // 清空旧规则
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    // 添加新规则
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          // 匹配所有http/https页面，也可以自定义匹配规则，比如匹配特定站点：pageUrl: { hostSuffix: 'example.com' }
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { schemes: ['http', 'https'] }
          })
        ],
        actions: [new chrome.declarativeContent.ShowAction()] // 匹配成功则启用图标
      }
    ]);
  });
});

// 点击逻辑无需额外判断，不符合规则的页面不会触发点击事件
chrome.action.onClicked.addListener(async (tab) => {
  try {
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ['iconClicked.js']
    });
  } catch (e) {
    console.log('脚本注入失败：', e.message);
  }
});

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