修复获取Instagram用户ID的JS脚本：切换主页后返回旧ID问题

我编写了一个带按钮点击事件的JavaScript脚本，用于获取Instagram用户的ID，但存在问题：仅能获取第一个用户的ID，切换到其他用户主页后，点击按钮返回的仍是旧用户ID，而非当前页面的用户ID。原脚本如下：

(function() {
    'use strict';

    // Function to extract profile ID from the Instagram page
    function getProfileId() {
        // Extracting profile ID from the page source
        var pageSource = document.documentElement.innerHTML;
        var profileIdPattern = /"profilePage_(\d+)"/;
        var matches = pageSource.match(profileIdPattern);
        if (matches && matches.length > 1) {
            return matches[1];
        }
        return null;
    }

    // Function to copy text to clipboard
    function copyToClipboard(text) {
        GM_setClipboard(text, 'text');
    }

    // Function to create and append a copy button to the Instagram page
    function createCopyButton() {
        var button = document.createElement('button');
        button.textContent = 'Copy Profile ID';
        button.style.position = 'fixed';
        button.style.top = '20px';
        button.style.right = '20px';
        button.style.zIndex = '9999';
        button.style.padding = '10px';
        button.style.border = 'none';
        button.style.backgroundColor = '#3897f0';
        button.style.color = '#fff';
        button.style.cursor = 'pointer';
        button.addEventListener('click', function() {
            var profileId = getProfileId();
            if (profileId) {
                copyToClipboard(profileId);
                console.log('Profile ID copied to clipboard:', profileId);
                alert('Profile ID copied to clipboard:\n' + profileId);
            } else {
                console.log('Profile ID not found.');
                alert('Profile ID not found.');
            }
        });
        document.body.appendChild(button);
    }

    // Run the function to create the copy button when the page is loaded
    window.addEventListener('load', createCopyButton);

})();

修改思路与方案 #

Instagram是单页应用（SPA），切换页面时不会刷新整个页面，原脚本直接读取documentElement.innerHTML会缓存旧的页面内容，导致获取到旧ID。需通过以下修改解决：

• 优化ID提取方式：优先从页面实时更新的结构化数据节点提取ID，备用方案读取body内的最新内容而非整个文档的HTML。
• 防止重复创建按钮：添加按钮唯一性检查，避免多次触发时生成重复按钮。
• 监听页面动态变化：通过路由事件和DOM监听确保按钮始终存在，同时保证每次点击时读取最新数据。

修改后的完整脚本 #

(function() {
    'use strict';

    // 提取当前页面的Instagram用户ID
    function getProfileId() {
        // 优先从结构化数据中提取（更可靠，页面切换时会实时更新）
        const scriptTags = document.querySelectorAll('script[type="application/ld+json"]');
        for (const tag of scriptTags) {
            try {
                const data = JSON.parse(tag.textContent);
                if (data?.mainEntity?.identifier) {
                    return data.mainEntity.identifier;
                }
            } catch (e) {
                // 解析失败则跳过当前标签
                continue;
            }
        }

        // 备用方案：从body内容中匹配profilePage模式
        const pageContent = document.body.innerHTML;
        const profileIdPattern = /"profilePage_(\d+)"/;
        const matches = pageContent.match(profileIdPattern);
        if (matches && matches.length > 1) {
            return matches[1];
        }

        return null;
    }

    // 复制文本到剪贴板
    function copyToClipboard(text) {
        GM_setClipboard(text, 'text');
    }

    // 创建并添加复制按钮到页面
    function createCopyButton() {
        // 检查是否已有按钮，避免重复创建
        if (document.querySelector('#copy-instagram-profile-id-btn')) {
            return;
        }

        const button = document.createElement('button');
        button.id = 'copy-instagram-profile-id-btn';
        button.textContent = 'Copy Profile ID';
        button.style.position = 'fixed';
        button.style.top = '20px';
        button.style.right = '20px';
        button.style.zIndex = '9999';
        button.style.padding = '10px';
        button.style.border = 'none';
        button.style.backgroundColor = '#3897f0';
        button.style.color = '#fff';
        button.style.cursor = 'pointer';
        
        button.addEventListener('click', function() {
            const profileId = getProfileId();
            if (profileId) {
                copyToClipboard(profileId);
                console.log('Profile ID copied to clipboard:', profileId);
                alert('Profile ID copied to clipboard:\n' + profileId);
            } else {
                console.log('Profile ID not found.');
                alert('Profile ID not found.');
            }
        });
        
        document.body.appendChild(button);
    }

    // 页面加载时初始化按钮
    window.addEventListener('load', createCopyButton);

    // 监听SPA路由变化，确保按钮存在
    window.addEventListener('popstate', createCopyButton);
    
    // 监听DOM变化，处理Instagram动态页面更新
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function() {
            if (!document.querySelector('#copy-instagram-profile-id-btn')) {
                createCopyButton();
            }
        });
    });
    observer.observe(document.body, { childList: true, subtree: true });

})();

关键修改说明 #

1. 可靠的ID提取：优先读取application/ld+json类型的脚本内容，这是Instagram页面实时更新的结构化用户数据，避免了旧HTML缓存的问题。
2. 重复创建防护：通过按钮ID检查，防止页面变化时重复生成多个按钮。
3. 页面变化监听：使用popstate事件监听路由切换，MutationObserver监听DOM结构变化，确保按钮始终存在且能读取最新页面数据。

内容的提问来源于stack exchange，提问作者theprogrammer451