解决 Chrome 扩展中 URL 参数解析问题：从 useParams 到 URLSearchParams 的优雅转变

问题背景

在开发 Chrome 扩展时，我们遇到了一个有趣的问题：在扩展页面中无法正确获取 URL 参数。具体来说，当用户访问类似这样的 URL 时：

chrome-extension://ikagihfgkipghifjdobklmpkhabjjmoi/index.html?full_result_table=true&scraperId=39525222-a483-4941-b789-7961b3ef3f93&taskId=a1e246bd-872b-4ed7-842d-ad6ec74f962f

我们原本使用 React Router 的 useParams hook 来获取参数，但发现它无法正常工作。这促使我们寻找更合适的解决方案。

问题分析

为什么 useParams 不工作？

其根本原因在于对 React Router 中不同参数获取 API 的混淆：

1. URL 参数类型的差异：目标 URL（如 chrome-extension://.../index.html?full_result_table=true&scraperId=...&taskId=...）中携带的是查询参数（Query/Search Parameters，即问号 ? 后的键值对）。
2. API 的职责不同：React Router 的 useParams hook 仅用于获取路由中的路径参数（Path Parameters，例如 /user/:id 中的 id）。在任何 Web 环境下（即便不是 Chrome 扩展环境），直接使用 useParams 也是无法读取到查询参数的。
3. 正确的 API 选型：在 React Router 中，如果要获取查询参数，应该使用 useSearchParams hook。使用原生的 URLSearchParams 同样能安全地绕过路由框架的限制来直接解析参数，而这并不是由于特殊的 chrome-extension:// 协议造成的环境障碍。

解决方案

我们采用了 URLSearchParams API 来替代 useParams。这是一个更底层的、更通用的解决方案。

代码实现

// 使用 URLSearchParams 获取参数
const searchParams = new URLSearchParams(window.location.search);
const scraperId = searchParams.get('scraperId');
const taskId = searchParams.get('taskId');

改进点

1. 参数验证：

if (!scraperId || !taskId) {
  console.error('Missing required parameters: scraperId or taskId');
  return;
}

1. 错误处理：

if (!scraperId || !taskId) {
  return <div>Error: Missing required parameters</div>;
}

1. 数据获取优化：

useEffect(() => {
  if (!scraperId || !taskId) return;

  const fetchExecutionRecord = async () => {
    // ... 数据获取逻辑
  };
  fetchExecutionRecord();
}, [scraperId, taskId]);

技术要点

URLSearchParams 的优势

1. 原生支持：URLSearchParams 是 Web API 的一部分，不需要额外依赖
2. 简单直接：API 设计直观，易于使用
3. 跨环境兼容：在 Chrome 扩展、普通网页等环境中都能正常工作

最佳实践

1. 参数验证：在使用参数前进行验证，避免潜在的错误
2. 错误处理：提供清晰的错误提示，提升用户体验
3. 依赖管理：正确处理 useEffect 的依赖项，避免不必要的重渲染

总结

通过这次问题解决，我们学到了：

1. 在特殊环境（如 Chrome 扩展）中，可能需要使用更底层的 API
2. 参数验证和错误处理是提升应用健壮性的关键
3. 选择适合当前环境的解决方案比坚持使用特定框架的特性更重要

这个解决方案不仅解决了当前的问题，也为将来处理类似场景提供了参考。在开发过程中，我们应该保持开放的心态，根据具体场景选择最合适的工具和方法。