编写自用油猴脚本踩坑记录

前言

春节期间，我叔叔问我这个不太懂前端的Jvav后端有没有什么办法可以帮他修改一下网页上现实的内容，于是就有了这次第一次编写油猴脚本的尝试。

需求

户外作业时，需要使用手机浏览器查看公司的一个页面信息，这个页面一共有16个卡片风格的信息块，一个信息块在手机上要滑动3个屏幕高度（逆天）。每次要从这么大一个信息块中找到有用的3条信息，搜索排序功能也是非常难用。需要将16个信息块中有用的几条信息，汇总起来，便于查看。

思路

我一听，啊这，我只能想到页面加载完成后，找到对应需要的数据的dom元素中找出来数据，单独显示在界面某处，或者用弹窗的方式。至于手机上如何执行脚本嘛，那就用能运行脚本的浏览器，或者支持油猴的浏览器，例如via啥的。

开干

第一个坑

一开始，先从Chrome浏览器的console一行一行输入代码来获取dom，就是重复的var a = document.getElementById(’xxx’)，一路下来还挺顺利的。很快，我便实现了在Console中加入一个Button，添加点击时间，并进行所需数据的排序和整理。

很快我变将其加入到油猴脚本中测试。

var newDiv = document.createElement("div");
newDiv.innerHTML='<button id="sort_button" onClick="doSort">排序</button>';
document.getElementById("div_search").appendChild(newDiv);

不行了，Button根本没出来。

原来，罪魁祸首就是这个iframe。

在油猴脚本中@match匹配的域名，和iframe中src的域名不同，那自然是获取不到dom的。

网上有说如何获取iframe中dom的方案，我尝试了一些，发现并不太好使，于是乎我的解决方案是，直接将@match写iframe对应的域名，终于看到了按钮了。

第二个坑

点击按钮，doSort not define。

好家伙，我明明定义了function doSort的啊。

尝试改成addEventListener后，有效果。

document.getElementById("sort_button").addEventListener("click", myFunction, false);

第三个坑

我起初偷懒，想直接将信息通过弹窗的方式，展示，每次需要看就弹窗一下。

可是，弹不出来，于是我尝试用console.log，居然也不出来的。

查看stackoverflow是这么说的。我也不知道有没有效果，但是最后也没有用alert，直接写了一个li标签。

console.log override not working in Tampermonkey

部署

一开始，我想到的是VIA浏览器可以执行脚本，但是我并没有去了解他的机制是否有区别，反正就是没有任何效果。

后来发现了一款可以安装插件的基于chromium的手机浏览器叫做Kiwi。（一直不知道为什么Chrome要在安卓端阉割掉这些）。

代码

// ==UserScript==
// @name         xxx
// @namespace    http://tampermonkey.net/
// @version      2024-02-17
// @description  xxx
// @author       xxx
// @match        https://xxx.xxx.cn/*
// @icon         xxx
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var newArray;
    function doSort() {
        newArray = Array();
        var panners = document.getElementsByClassName('信息卡片的class，一共有16个');
        for (var i = 0; i < panners.length; i++) {
           var id = panners[i].id;
           var lastIndex = id.lastIndexOf('-');
           var shotId = id.substring(lastIndex + 1, lastIndex + 4);
           var childDiv = panners[i].firstChild;
           var mainDataDiv = childDiv.lastChild;
           var detailDataDiv = mainDataDiv.lastChild;
           var usefulData = detailDataDiv.firstChild;
           var usefulDatas = usefulData.childNodes;
           var use1DataNodes = usefulDatas[1].firstChild.childNodes;
           var percent = use1DataNodes[3].lastChild.firstChild.innerText;
           var use2DataNodes = usefulDatas[2].firstChild.childNodes;
           var carNumber = use2DataNodes[0].lastChild.firstChild.innerText;
           var carID = use2DataNodes[3].lastChild.firstChild.innerText;
           var percentNum = 0;
           if (percent !== '--') {
               percentNum = Number(percent.substring(0, percent.length - 1));
           }
           var obj = {"shotId": shotId, "percent": percent, "carNumber": carNumber, "carID": carID, "percentNum": percentNum};
           newArray.push(obj);
         }
         newArray = newArray.sort(function(a, b) {
           if (a.percentNum === b.percentNum) {
               return Number(a.shotId) - Number(b.shotId);
           } else {
               return b.percentNum - a.percentNum;
           }
         });
         var sort_list = document.getElementById('sort_list');
         var sort_list_html = '';
         newArray.map(function(e, i){
            sort_list_html = sort_list_html + '<li>' + e.shotId + ' ' + e.percent + ' ' + e.carNumber + ' ' + e.carID + '</li>';
         });
         sort_list.innerHTML = sort_list_html;
   }
   // 添加排序按钮
    var newDiv = document.createElement("div");
    newDiv.innerHTML='<button id="sort_button">排序</button>';
    document.getElementById("div_search").appendChild(newDiv);
    document.getElementById("sort_button").addEventListener("click", doSort, false);
    // 添加排序列表
    var newListDiv = document.createElement('div');
    newListDiv.innerHTML='<ol id="sort_list"><li>Coffee</li><li>Milk</li>';
    document.getElementById("div_search").appendChild(newListDiv);
})();

总结

也算是实现了这个小小的需求吧，不只是闷头干代码，还需要了解的是，油猴的沙盒机制，不然没有办法自动化执行。

[油猴脚本开发指南]沙盒机制的前世今生-油猴中文网