解决 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 不工作？

1. 环境差异：Chrome 扩展运行在一个特殊的环境中，与普通的 web 应用不同
2. 路由机制：React Router 的 useParams 依赖于路由配置，而在扩展页面中，我们可能没有完整的路由配置
3. URL 结构：Chrome 扩展的 URL 使用特殊的协议（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. 选择适合当前环境的解决方案比坚持使用特定框架的特性更重要

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