需求

icourse163.org慕课网上的视频集不标注数字编号，迫于某种原因我经常需要经常自己数看到第几个视频了，很不方便。

故写此插件以免去数数过程。

工具

谷歌浏览器开发者模式，改样式方便，还能复制出选择器

暴力猴谷歌浏览器插件，被人推荐，推荐的理由是比TM方便，我的意思是TamperMonkey。

扩展谜网站，用于下载插件，在国内下谷歌插件挺方便的

greasemonkey网站，用于参考类似代码，主要看CSS相关的，进入脚本集合然后拉到底看右边能看到分类category，也就两个，JS和CSS

greasemonkey wiki

jquery官方建议1.8.2

插件代码

// ==UserScript==
// @name        icourse163.org显示视频编号
// @namespace   https://www.icourse163.org/
// @version     1.2
// @description 在看课的时候视频没有编号，用这个可以显示当前是第几个视频。
// @author      good1uck
// @match       https://www.icourse163.org/learn/*
// @require     http://code.jquery.com/jquery-1.8.2.min.js
// @grant       none
// ==/UserScript==
$(document).ready(
  function () {
    //添加计数器
    $(".unitslist").addClass("mycounter");

    //创建并添加新伪类样式 ，如果span有title,则会显示视频标题。
    let newstyle =
      `
      <style>
      .u-icon-video2:before {
        counter-increment : section;
        content: '[' counter(section) ']' ' ' attr(title) !important
      }

      .unitslist {
        counter-reset:section;
      }
      </style>
      `
    $(newstyle).appendTo('head');

  }
)

其他（可不看）

有以下几点超出需求，我没有做。

可以改进的地方是，除了编号以外还可以显示出当前视频标题，其位于某父级元素的title属性里。

ui方面其实除了没编号以外也属实尴尬，一定有更好的UI样式。

遗弃片段（可不看）

    //修改span里的title
    $("li.f-fl").each(
      function () {
        let title = $(this).attr("title")
        console.log(title)
        $(this).children("span").attr("title", title)
      }
    )
    
    //监听修改title
    $(".j-up").click(
      function(){
        $("li.f-fl").each(
          function () {
            let title = $(this).attr("title")
            console.log(title)
            $(this).children("span").attr("title", title)
          }
        )
      }
    )