Shopify partners 双击将 webhook 日志时间调整为本地时区的时间

shopify-parthers-webhook_deliveries-dbclick-formate-time.user.js

// ==UserScript==
// @name         Shopify Partners Webhook Time Localizer
// @namespace    https://nowtime.cc
// @version      2025-06-20
// @description  Webhook 日志时间调整为本地时区的时间显示；优化相关样式
// @author       Shine
// @match        https://partners.shopify.com/*/apps/*/webhook_deliveries/details*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=shopify.com
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const TIME_CELL_SELECTOR = '.Polaris-ResourceItem .Polaris-Box > div > div:nth-child(9)';

    /**
     * 将 UTC 文本转换为本地时间字符串
     * @param {string} input - 如 "Jun 19 06:58:03"
     * @returns {string} - 如 "06-19\n14:58:03"
     */
    function formatUTCToLocal(input) {
        const currentYear = new Date().getFullYear();
        const utcDate = new Date(`${input} ${currentYear} UTC`);
        const localDate = new Date(utcDate);

        const pad = (n) => n.toString().padStart(2, '0');
        return `${pad(localDate.getMonth() + 1)}-${pad(localDate.getDate())}<br/>${pad(localDate.getHours())}:${pad(localDate.getMinutes())}:${pad(localDate.getSeconds())}`;
    }

    /**
     * 处理单个时间节点的转换
     * @param {Element} ele
     */
    function convertElementTime(ele) {
        if (!ele || ele.getAttribute('data-handled') === 'true') return;

        ele.setAttribute('data-handled', 'true');
        ele.innerHTML = formatUTCToLocal(ele.innerText.trim());
    }

    /**
     * 批量处理所有已渲染的时间节点
     */
    function processAllTimes() {
        document.querySelectorAll(TIME_CELL_SELECTOR).forEach(convertElementTime);
    }

    /**
     * 初始化样式
     */
    function injectStyle() {
        const style = document.createElement('style');
        style.innerHTML = `
            .Polaris-Frame__Content .Polaris-Card > div:nth-child(2) {
                position: sticky;
                bottom: 0;
                background: white;
                z-index: 100;
            }
            .Polaris-ResourceList__FiltersWrapper + .Polaris-ResourceList {
                min-height: 1340px;
            }
        `;
        document.head.appendChild(style);
    }

    /**
     * 监听资源项添加时处理新增时间节点
     */
    function observeNewItems() {
        const observer = new MutationObserver((mutations) => {
            for (const mutation of mutations) {
                if (mutation.type === 'childList') {
                    mutation.addedNodes.forEach((node) => {
                        if (!(node instanceof HTMLElement)) return;

                        const item = node.matches('.Polaris-ResourceItem__ListItem') ? node : node.querySelector('.Polaris-ResourceItem__ListItem');
                        if (item) {
                            const timeNode = item.querySelector(TIME_CELL_SELECTOR);
                            convertElementTime(timeNode);
                        }
                    });
                }
            }
        });

        observer.observe(document.body, { childList: true, subtree: true });
        console.log('[Shopify webhook time]: MutationObserver started');
    }

    // 初始化流程
    injectStyle();
    processAllTimes();
    observeNewItems();
})();