油猴腳本給管理後臺列表添加功能按鈕

因爲需要調閱視頻和埋點,視頻列表上只有刪除視頻以及視頻詳情的按鈕,我想看視頻的時候直接方便點開埋點詳情,而不是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);
})();