开源一款浏览器插件：通用内部导航工具

开源地址：https://github.com/defeng-hub/psm-navigator

一个基于 唯一标识符 的通用内部导航 Chrome/Edge 扩展，帮助开发者快速跳转到各种内部平台。

主页面：

配置页面：

核心功能

• 🚀 通用跳转器：输入 PSM 快速跳转到各种平台（日志、监控、部署、代码等）。
• 🎨 现代化 UI：500px 宽屏设计，双列布局，信息展示更高效。
• 💾 智能状态记忆：自动保存上次输入的 PSM 和选中的变量，重新打开插件即可无缝继续工作。
• 🔧 增强型变量系统：
  • 支持配置 {Name, Value} 键值对（例如显示 "美国"，值为 "us-east-1"）。
  • 支持自定义变量（如 , ），并在跳转时提供动态选择。
• 📝 智能模板：使用 {psm} 占位符定义 URL 模式（例如 https://grafana.internal/d/{psm}）。
• 🔍 智能搜索：
  • 历史记录：自动保存最近访问的 PSM。
  • 模糊匹配：基于导入的 PSM 列表提供实时搜索建议。
• 📦 数据管理：支持 JSON 格式的配置导入导出，方便团队共享。
• 🌍 多语言支持：中英文无缝切换。

技术栈

• React + TypeScript
• Vite + @crxjs/vite-plugin
• Tailwind CSS
• Lucide React (图标)

项目结构

src/
├── components/      # 共享 UI 组件
├── entrypoints/     # 应用入口点
│   ├── options/     # 配置页面（变量管理、平台配置、数据导入）
│   └── popup/       # 主扩展弹出窗口（导航交互核心）
├── i18n/            # 国际化资源
├── services/        # 核心业务逻辑（URL 生成、变量提取）
├── storage/         # Chrome Storage 封装（支持状态持久化）
├── types/           # TypeScript 类型定义
└── index.css        # Tailwind 全局样式

开始使用

1. 安装依赖

   npm install
   

2. 开发模式

   npm run dev
   

   这将启动 Vite 的监视模式。

3. 在 Chrome 中加载

   • 打开 Chrome 并进入 chrome://extensions/。
   • 启用「开发者模式」（右上角）。
   • 点击「加载已解压的扩展程序」。
   • 选择此项目中的 dist 文件夹。

4. 构建生产版本

   npm run build
   

使用指南

基本使用

1. 点击扩展图标打开弹出窗口。
2. 输入 PSM（支持模糊搜索）。
3. 插件会自动恢复您上次选中的变量（如环境、机房）。
4. 点击对应的平台卡片即可跳转。

变量配置（进阶）

1. 右键图标选择「选项」 -> 「变量配置」。
2. 新建或编辑变量，支持添加多组 名称-值 对。
   • Name: 用于在界面上显示的友好名称（如 SH）。
   • Value: 实际拼接到 URL 中的参数值（如 cn-shanghai）。
3. 保存后，在平台 URL 模板中使用 {变量名} 即可引用。

状态保持

插件内置了防抖保存机制，您的以下操作会被自动记忆：

• 输入框中的 PSM 内容。
• 每一个变量当前选中的值。
  这意味着您可以随时关闭窗口，稍后回来继续操作，无需重新输入。