Chrome Plugin Gate（浏览器插件聚合门户）产品系统Vibe Coding

效率工具正从「多标签分散使用」走向「统一入口、多工具共存」。

个人与团队常同时依赖文档、调试、运维、数据查询等 Web 工具，却散落在标签页与独立扩展中，切换成本高、上下文易丢。Chrome 扩展与 iframe 嵌入已成熟，使「一个快捷键唤起门户、内部聚合多个工具页」成为低侵入、可落地的形态。

企业内部普遍具备工具中台、能力注册与模型数据服务。门户适合作为前端聚合层：

- 统一鉴权透传
- 访问记录落库
- 按使用频率推荐入口

随混合办公普及，跨浏览器一致的历史与 Dock 式固定入口，将成为效率产品标配。长期可演进为组织级「工具工作台」，对接能力注册、版本发布与插件市场，形成可运营生态。

Chrome Plugin Gate 将多个 Chrome 插件 / Web 工具收拢到同一入口，以 iframe 嵌入访问，减少标签页来回切换。

**门户与导航**

- 首页：九宫格展示已配置插件
- 门户：插件选择器、最近访问标签、类 macOS Dock
- 多插件保活切换，支持刷新与新窗口打开

**管理与 Dock**

- 插件增删改查、名称模糊搜索、是否固定到 Dock
- Dock 异步聚合「已固定」与「访问次数最高」插件
- 焦点随当前 iframe 高亮，并滚动定位

**数据与扩展**

- 访问记录经 model-data-server 持久化，多浏览器一致
- visitor_token 多渠道透传；iframe 重定向友好提示
- 配套库表初始化、产品能力注册、Chrome 扩展构建与部署脚本

本人负责整站前端与配套工程。

**实现方式**

通过tools-hub平台by vibe coding构建（https://www.proginn.com/w/1583582）

**技术栈与架构**

- Vue 3 + TypeScript + Vite 多页应用
- Pinia：目录、会话、帧、Dock 状态
- Vue Router：动态判断直接访问 / 代理访问的 basename
- Axios：对接 model-data-server（目录、访问记录、分组统计）

**难点与亮点**

- 难点：多层 iframe（扩展壳 → 门户 → 业务插件）下的重定向检测与 token 透传；多插件保活不重载；Dock 异步加载与焦点滚动；版本化资源前缀与代理适配
- 亮点：将「快捷键唤起的单一门户」与「可运营的插件配置 + 跨端访问统计」结合，形成可迭代的工具聚合工作台，而非静态导航页