npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

dsh-plugin-top

v1.0.1

Published

yhbd.top 插件雷达:DSH 侧边栏 plugin_top 按钮 + 大面板(顶层「全部」+ 站点同款细分榜单:原生星榜·飙升·今日新秀·兼容工具·分类冠军;分类条随榜单联动;「安装」写入「先了解+安全审查」引导语),数据由插件内嵌的同源 HTTP 反代拉取,无需 CORS / nginx 配置;附带 Agent 可调用的搜索/榜单工具。

Readme

dsh-plugin-top · DSH 插件雷达

侧边栏一键打开 www.yhbd.top 插件雷达:搜索框 + 22 分类 + 站点同款五榜单(原生星榜 / 飙升 / 今日新秀 / 兼容工具 / 分类冠军),看中哪个点「安装 →」,自动复制该插件的仓库地址并打开客户端自带的「插件」页。

plugin_top 面板

你会得到什么

浏览器侧(DSH Web 装完即用):

  • 侧边栏底部出现 📡 plugin_top 按钮(窄栏只显图标,宽栏带文字)
  • 点开大面板(最大 880×700,双栏列表):顶层 「全部」(3900+ 插件全集 ★ 序)+ 站点同款细分榜单——原生星榜(native ★ 全量)· 飙升(▲delta)· 今日新秀(+N)· 兼容工具榜(非 DSH 原生生态)· 分类冠军(每分类 ★ 最高 native,🏆)
  • 分类条随榜单联动:切到哪个榜,分类 chips 只统计该榜内的插件分布(如今日新秀 +320 → 分类加总=320);点分类是榜内过滤、不跳回全集;本地即时搜索(仓库名 / 关键词 / 分类,秒响应)可与分类叠加
  • 每行右侧「安装 →」按钮 → 一键完成三件事:复制该插件的 GitHub 仓库地址到剪贴板(兜底)、打开客户端自带的「插件」页(ctx.layout.selectPanel("plugins"),与官方插件管理器同一入口)、点开「添加插件」并把地址自动填入输入框(按官方占位符 installSpecPlaceholder 认那个输入框,用原生 value setter + input 事件写入,兼容 React 受控组件)。确认后点「安装」即可
  • 点仓库名或行空白处 → 新开插件详情页
  • 数据由插件内置的同源反代 /api/plugin-top/data 拉取,sessionStorage 6h 缓存,深浅色主题跟随 DSH
  • ESC / × / 面板外点击关闭

Agent 侧(会话里直接说人话):

| 工具 | 用途 | 示例 | |---|---|---| | plugin_top_search | 按关键词/分类/星数搜插件,返回简介+安装命令+详情页 | "帮我找个发 QQ 消息的插件" | | plugin_top_trending | 当日新入库 / 近期飙升 / 原生总星榜 | "DSH 插件圈最近有什么新货" |

安装

# 从 GitHub 源码安装(当前主渠道;pnpm 首次 add 需要构建授权:
# 把 pnpm 打印的包键加入 profile 的 pnpm-workspace.yaml → allowBuilds,重试即可;
# 建议锁 commit:github:yhbd-top/dsh-plugin-top#<sha>)
dsh plugin --profile web add github:yhbd-top/dsh-plugin-top

# npm 安装(发布到 registry 后可用)
dsh plugin --profile web add dsh-plugin-top

# 本地 tgz(在仓库目录 npm pack 得到)
dsh plugin --profile web add ./dsh-plugin-top-1.0.1.tgz

装好后重启 DSH(schtasks /run /tn DSHWeb 或你的等效方式)并硬刷新页面,侧边栏即出现 plugin_top 按钮。

卸载:dsh plugin --profile web remove dsh-plugin-top

零依赖部署

本插件把 micro.json 拉取做成 DSH Web 进程内反向代理(/api/plugin-top/data → https://www.yhbd.top/data/plugins.micro.json),所以:

  • 不需要 yhbd.top 加 CORS 头
  • 不需要 nginx 改任何配置
  • 不需要 iframe / CSP frame-ancestors
  • 一个插件搞定所有事:用户 dsh plugin add dsh-plugin-top 即可使用

唯一前提:DSH Web 进程能访问 https://www.yhbd.top(绝大多数部署都满足)。

配置(Agent 侧可选)

在 profile 的 cordis.patch.yml 里覆盖:

- id: plugin-top
  name: dsh-plugin-top
  config:
    baseUrl: https://www.yhbd.top   # 数据源站点(影响 agent 工具 + 浏览器反代源)
    cacheTtlHours: 24               # agent 工具侧目录索引缓存时长
    timeoutMs: 10000                # agent 工具 / 反代拉取超时

数据与隐私

  • 浏览器侧:fetch 同源 /api/plugin-top/data,由插件内置反代拉 yhbd.top 静态索引(gzip ~300KB)
  • 缓存:sessionStorage(关掉标签页即清),不落盘、不跨会话
  • Agent 侧缓存:~/.dsh-plugin-top/micro-cache.json,断网/站点不可用时自动回退旧缓存并标注日期
  • 无任何上传、遥测、凭证;「安装 →」按钮只做「复制到剪贴板 + 切换界面面板 + 写入本地输入框」,不代发任何消息

开发

npm install
npm run typecheck
npm run build          # tsdown(服务端 ESM,含 webServer 反代路由)+ scripts/build-client.cjs(浏览器 CJS 包裹)
node scripts\smoke-client.cjs   # 模拟 loader 冒烟
# 本机联调(不安装,用 patch overlay 临时加载):
dsh --profile web --patch ./cordis.local.yml

结构说明:

  • 服务端:src/index.ts → dist/index.mjs(cordis bundle,声明 agent 工具 + 挂 /api/plugin-top/data 反代路由 + 配置 schema)
  • 浏览器端:src/client.js → dist/client.js(window.__ModuleLoader__.load 官方同形包裹,渲染 sidebar.footer.action 按钮 + 搜索/分类/榜单面板)
  • package.json 同时声明 dsh.bundle.patch 与 dsh.client;exports 必须含 ./package.json,否则 client-modules 的 require.resolve('<pkg>/package.json') 会静默跳过你的 client bundle(踩过,勿删)

License

MIT