为揭秘CSDN谁有100万粉丝？我连夜研发了粉丝数排行榜插件，通过 dalao 一键即可唤醒-蒲公英云

为揭秘CSDN谁有100万粉丝？我连夜研发了粉丝数排行榜插件，通过 dalao 一键即可唤醒

橡皮擦，做好技术接待工作

本博客起源于 5A 技术俱乐部的一次闲聊，大家在讨论 CSDN 粉丝最多的作者是谁？

恰巧这题有解，接下来，橡皮擦将通过实现 CSDN 插件扩展的方式，为你揭秘 CSDN 哪些坐拥 10W+粉丝的大作者。

创建插件

本插件扩展基于 CSDN 开发助手研发，即 https://plugin.csdn.net/，开发之前，你需要先安装一个。

安装了之后，再访问 CSDN 就没有任何广告打扰了，这操作不得不夸赞一下，用流行的话说就是我杀我自己。

为揭秘CSDN谁有100万粉丝？我连夜研发了一款粉丝数排行榜插件，通过 dalao 一键即可唤醒
从配置开始，安装开发者助手后，先选择插件扩展

为揭秘CSDN谁有100万粉丝？我连夜研发了一款粉丝数排行榜插件，通过 dalao 一键即可唤醒
在弹窗的窗口中选择，新增插件，即可进入插件添加页面。

开发文档参考 https://csdn-plugin.gitcode.host/csdn-chrome-plugin/extend/index.html，具体语法橡皮擦不再细说，直接进入代码编写时间。

添加插件弹窗选择 本地代码。

为揭秘CSDN谁有100万粉丝？我连夜研发了一款粉丝数排行榜插件，通过 dalao 一键即可唤醒
插件依赖的是前端技术栈，如果你希望编写更强大的插件，围绕 CSS 和 JS 学习即可。

本次要实现的是 CSDN 粉丝数排行榜，目标展示前 10 即可。页面布局参考周榜 https://blog.csdn.net/rank/list/weekly 实现。

下图触发关键词开始设置的为 likes，后续因存在重复修改为 dalao 。
为揭秘CSDN谁有100万粉丝？我连夜研发了一款粉丝数排行榜插件，通过 dalao 一键即可唤醒

编写代码

切换到 HTML 页面，参考 CSDN 周榜 HTML 页面进行代码提取，具体代码如下，编写过程中，可随时切换到预览选项卡，查看实时效果。

<html>
  <head>
    <title>粉丝数排行榜</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  </head>
  <body>
    <div class="floor-rank-total">
      <div class="floor-rank-total-item">
        <div class="total-content">
          <span class="number rank-index-icon" style="background-position: 0px 0px" ></span>
          <a target="_blank" href="https://blog.csdn.net/hihell">
            <img src="https://profile.csdnimg.cn/6/E/2/3_hihell" alt="" class="author" /></a>
          <div class="total-box">
            <dl>
              <dd>
                <a target="_blank" href="https://blog.csdn.net/hihell" >梦想橡皮擦</a >
                <img src="https://csdnimg.cn/release/cmsfe/public/img/expertNew.44860fbe.png" alt="" />
                <img src="https://csdnimg.cn/release/cmsfe/public/img/vipNew.b81a61be.png" alt="" />
                <!---->
              </dd>
              <dt>
                粉丝数
                <span style="margin-left: 8px; margin-right: 24px">7W+</span>
                博客等级
                <img src="https://csdnimg.cn/identity/blog9.png" alt="" style="margin-left: 8px; margin-right: 24px" />
              </dt>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>