Chrome扩展获取当前标签页URL遇chrome://报错的解决方法

这个问题我之前也碰到过——Chrome的内部URL（比如chrome://开头的地址）不属于标准的HTTP/HTTPS这类可被URL构造函数解析的协议，所以直接调用new URL(tab.url)就会抛出错误。至于谷歌搜索结果点击时的报错，大概率是跳转过程中出现了临时的无效URL状态，同样会触发这个问题。

下面给你两种实用的解决方案，既能处理正常URL，又能避开无效地址：

方案一：用try-catch捕获错误（最通用） #

直接把构造URL的代码放在try-catch块里，遇到无效URL时就跳过后续处理，同时记得释放标签页的处理标记（不然这个标签页之后的更新事件会被忽略）：

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { if (changeInfo.url) run(tab); });
chrome.tabs.onActivated.addListener(info => { chrome.tabs.get(info.tabId, run); });
const processingTabId = {};

function run(tab) {
  if (processingTabId[tab.id]) return;
  processingTabId[tab.id] = true;
  
  let newUrl;
  try {
    newUrl = new URL(tab.url);
    // 这里写你处理有效URL的逻辑，比如解析域名、参数等
    console.log("处理有效URL:", newUrl.hostname);
  } catch (error) {
    // 遇到无效URL时的处理，比如打印日志或者直接跳过
    console.log("跳过无效URL:", tab.url);
  } finally {
    // 无论成功失败，都释放处理标记
    delete processingTabId[tab.id];
  }
}

方案二：先过滤允许的协议（更精准） #

如果你只需要处理特定协议的URL（比如HTTP/HTTPS），可以先判断URL的协议是否在白名单里，再进行构造：

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { if (changeInfo.url) run(tab); });
chrome.tabs.onActivated.addListener(info => { chrome.tabs.get(info.tabId, run); });
const processingTabId = {};
// 定义你需要处理的协议列表
const allowedProtocols = ['http:', 'https:', 'ftp:'];

function run(tab) {
  if (processingTabId[tab.id]) return;
  processingTabId[tab.id] = true;
  
  try {
    const urlObj = new URL(tab.url);
    if (allowedProtocols.includes(urlObj.protocol)) {
      // 处理符合要求的URL
      console.log("处理URL:", urlObj.href);
    } else {
      console.log("跳过不支持的协议URL:", tab.url);
    }
  } catch (error) {
    console.log("跳过无效URL:", tab.url);
  } finally {
    delete processingTabId[tab.id];
  }
}

关键注意点 #

• 一定要在finally块里删除processingTabId[tab.id]，否则这个标签页后续的更新/激活事件会被直接跳过，导致功能失效。
• 谷歌搜索结果点击的报错本质也是无效URL的问题，上面两种方案都能覆盖这种场景。

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