油猴脚本给管理后台列表添加功能按钮

因为需要调阅视频和埋点,视频列表上只有删除视频以及视频详情的按钮,我想看视频的时候直接方便点开埋点详情,而不是copy文件名里包含的uuid 然后去搜对应uuid的埋点详情,感觉有点太费劲了,何不直接在视频列表上挂个埋点按钮呢~

基于以上的一个偷懒需求,而产品经理没有改版升级的意愿,鉴于想偷懒并且帮助其他有同样需求的同事,只能自己动手咯~

代码已做脱敏处理:
主要用到js很基础的一些api

1. 监听dom节点变化
2. 查找子串是否存在
3. split切割字符串
4. 查找dom节点
5. 排序
6. 追加dom子节点

// ==UserScript==
// @name         埋点跳转
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  自己来
// @author       CoderWGB
// @match        http://xxx.videoList.com/resource
// @match        http://xxx.videoList.com/resource
// @icon         https://www.google.com/s2/favicons
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
//监听dom节点变化
    var targetNode = document.getElementById('dataList');
    var config = { attributes: true, childList: true, subtree: true };
    var callback = function(mutationsList) {
        mutationsList.forEach(function(item,index){
            if (item.type == 'childList') {
                //包含埋点按钮的旧不再添加了
              const changeNode = item.target.innerHTML.indexOf("埋点");
               if (changeNode == -1 && index < 1 ){//避免添加频繁 回调一次添加一次就好了
                   setTimeout(function (){
                       //首先找到定位节点
                       var details = document.getElementsByClassName("detail");
                       for (var i = 0; i < details.length; i++){
                           const a = details[i];
                           //找到父节点
                           var par = a.parentNode;
                           //找到父节点的父节点
                           var ye = par.parentNode;
                           //遍历父节点的父节点
                           var childs = ye.childNodes;
                           var uuidNode = null;
                           for(var j = 0; j < childs.length; j++){
                               //找到子节点中包含.flv文本的标签
                               if(childs[j].innerText.indexOf(".flv") != -1){
                                   uuidNode = childs[j];
                               }
                           }
                           //对该标签进行分割排序找最长的那个子串即提取uuid
                           const uuid = uuidNode.innerHTML.split("_").sort((a, b) => b.length - a.length)[0];

                           //创建一个div节点
                           var btn = document.createElement("div");
                           btn.style.color = '#3c8dbc';
                           btn.style.fontSize = '14px';
                           btn.style.cursor = "pointer";
                           btn.innerText = "埋点";
                           btn.onclick = function (){
                               var url ="http://xxx.videoList.com/resource/tracking?uuid="+uuid;
                               window.open(url,'_blank');
                           }
                           //追加到父节点
                           par.appendChild(btn);

                           //同理顺带增加个下载按钮
                           var btn1 = document.createElement("div");
                           btn1.style.color = '#3c8dbc';
                           btn1.style.fontSize = '14px';
                           btn1.style.cursor = "pointer";
                           btn1.innerText = "下载";
                           btn1.onclick = function (){
                               var url = a.href;
                               url = url.replace('load','download/load');
                               window.location.href = url
                           }
                           par.appendChild(btn1);
                       }
                   }, 100);//需要加个100ms延时不然按钮加载不出来
               }

            }
        });
    };
    var observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
})();