Exact-Time-Viewer-For-Instagram

Greasy Fork is available in English.
Exact-Time-Viewer-For-Instagram

Converts Instagram time elements to local time zone in user's local time zone format with time zone info added.
当前为 2024-12-29 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Exact-Time-Viewer-For-Instagram
// @namespace    http://tampermonkey.net/
// @version      1.1.3
// @description  Converts Instagram time elements to local time zone in user's local time zone format with time zone info added.
// @match        *://*.instagram.com/*
// @icon                https://www.google.com/s2/favicons?sz=64&domain=instagram.com
// @author       aspen138
// @grant        none
// @license      MIT
// ==/UserScript==

// Port the chrome extension `Exact-Time-Viewer-For-Instagram` to tampermonkey script
// reference: https://github.com/ehmorris/Exact-Time-Viewer-For-Instagram


(function() {
    'use strict';

    const processedElements = new WeakSet();

    function formatDate(datetime) {
        const dateObject = new Date(datetime);
        const time = dateObject.toLocaleTimeString();
        const date = dateObject.toLocaleDateString();
        const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        return `${time}, ${date} (in the ${localTimeZone} time zone)`;
    }

    function processTimeElement(element) {
        if (!processedElements.has(element)) {
            const datetime = element.getAttribute('datetime');
            if (datetime) {
                const formattedDate = formatDate(datetime);
                const originalContent = element.innerHTML;

                // Store the original content as a data attribute
                element.setAttribute('data-original-content', originalContent);

                // Add event listeners for hover and leave
                element.addEventListener('mouseover', () => {
                    element.innerHTML = formattedDate;
                });

                element.addEventListener('mouseleave', () => {
                    element.innerHTML = originalContent;
                });

                processedElements.add(element);
            }
        }
    }

    function processTimeElements(root) {
        const timeElements = root.querySelectorAll('time[datetime]');
        timeElements.forEach(element => {
            processTimeElement(element);
        });
    }

    // Process existing <time> elements on the page
    processTimeElements(document);

    // Observe for future <time> elements added to the DOM
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                if (node.nodeType === 1) { // Node.ELEMENT_NODE
                    if (node.tagName && node.tagName.toUpperCase() === 'TIME') {
                        processTimeElement(node);
                    } else {
                        processTimeElements(node);
                    }
                }
            });
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });

})();