篡改猴用vue+element-ui实现

// ==UserScript==
// @name         数据概览-实时概况
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match       你的地址?*
// @require      https://unpkg.com/jquery@3.6.0/dist/jquery.min.js
// @require      https://unpkg.com/vue@2.7.14/dist/vue.js
// @require      https://unpkg.com/element-ui/lib/index.js
// @grant        GM_registerMenuCommand
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// @grant        GM_listValues
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';
    var header_link = '<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">';
    var header_link_tag = $("head");
    if (header_link_tag) {
        header_link_tag.append(header_link);
    }
    const formList = {
        paymentAmountExceed: {
            "label": "支付金额超过",
            "value": "200%"
        },
        paymentAmountExceedRanking: {
            "label": "二级行业排名",
            "value": "200%"
        },
        paymentAmount: {
            "label": "支付金额",
            "value": "200%"
        },
    }
    GM_registerMenuCommand("设置-实时概况", () => {
        var divApp = $(`
        <div id="vueApp">
            <el-dialog
                title="设置-实时概况(只需要填写数字，无需填写后缀如%或者+之类的)" id="menuDialog" top="6vh"
                :visible.sync="dialogVisible" @close="cancel"
                width="30%" destroy-on-close :close-on-click-modal=false>
                <el-form ref="ruleForm" label-position="right" :model="formList" :rules="rules" label-suffix="："
                    label-width="auto">
                    <el-form-item v-for="(item, index) of formList" :label="item.label" :key="index" :prop="index">
                    <el-input v-model.trim="item.value" clearable placeholder="请输入" />
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
                </span>
                </el-dialog>
        </div>
        `);

        var ul_tag = $("body");
        if (ul_tag && document.querySelectorAll("#vueApp").length == 0) {
            ul_tag.append(divApp);
        };

        Vue.prototype.$ELEMENT = {
            size: 'small'
        }

        var app = new Vue({
            el: '#vueApp',
            data() {
                return {
                    dialogVisible: true,
                    formList,
                    rules: {}
                };
            },
            mounted() {
                this.dialogVisible = true
                if (GM_getValue('settingList') === undefined) {
                    this.formList = formList
                } else {
                    this.formList = Object.assign({}, GM_getValue('settingList'))
                }
                // GM_deleteValue("settingList");
                // console.log('this.ruleForm', GM_listValues());
            },
            methods: {
                cancel() {
                    this.dialogVisible = false
                    this.$destroy();
                },
                confirm() {
                    GM_setValue('settingList', this.formList)
                    this.dialogVisible = false
                }
            },
            destroyed() {
                $('#vueApp').remove()
            }
        })
    });

    setInterval(() => {
        let getList = GM_getValue('settingList')
        var objSet = {}
        Object.keys(getList).forEach(key => Object.assign(objSet, { [key]: getList[key].value || '' }));
        //今日支付金额已经超过0.00%的同行卖家
        $('.RealTimeBrief--highlight-number--YshrbWc').eq(0).text(objSet.paymentAmountExceed)
        $('.ShopLevel--container--pg1_iop').children().eq(6).children('span').text(objSet.previousDayRanking + '名')
        //处理支付金额高于同行商家60%-80%上方的div背景颜色状态
        let greenBackgroundRange = [0, 20, 40, 60, 80, 1000]
        let num = objSet.PayMoreThanPeers
        let mapIndex = greenBackgroundRange.findIndex(item => item > num)
        let rangeStr = greenBackgroundRange[mapIndex - 1] + '%-' + greenBackgroundRange[mapIndex] + '%'
        $('.ShopLevel--pay-rank--SCfBwYc').text('高于同行' + rangeStr)
        const $myEle = $('.ShopLevel--level-bar--pMVPDRk').children('div')
        $myEle.each(function (index, el) {
            if (index < mapIndex) {
                $(this).addClass('ShopLevel--level-bar-current--TOYpFpP');
            }
        });
    }, 1000)
})();