图寻复盘助手的开发 - 利用浏览器脚本劫持 XHR 请求的基本方法

// UI 代码已除去，仅保留核心逻辑

(function() {
    'use strict';

    // 调试模式开关
    const DEBUG_MODE = true;
    const OriginalXHR = window.XMLHttpRequest;
    
    // 日志函数
    function log(...args) {
        if (DEBUG_MODE) {
            console.log('[图寻小助手-Log]', ...args);
        }
    }

     // 重写 XMLHttpRequest 以拦截请求
    window.XMLHttpRequest = function() {
        const xhr = new OriginalXHR();

        const originalOpen = xhr.open;
        const originalSend = xhr.send;

        xhr.open = function(method, url) {
            log('拦截到XHR请求:', url);
            this._url = url;

            return originalOpen.apply(this, arguments);
        };

        xhr.send = function() {
            xhr.addEventListener('load', () => {
                const url = this._url;

                // 这里通过游戏中不同街景时的抓包，获取相应 API 地址，然后再此处判断
                const baiduPanoRegex = /https:\/\/tuxun\.fun\/api\/v0\/tuxun\/mapProxy\/getPanoInfo/;
                const tencentPanoRegex = /https:\/\/tuxun\.fun\/api\/v0\/tuxun\/mapProxy\/getQQPanoInfo/;
                const googlePanoRegex = /https:\/\/tile\.chao-fan\.com\/\$rpc\/google\.internal\.maps\.mapsjs\.v1\.MapsJsInternalService\/GetMetadata/;

                // 转给解析函数负责
                if (baiduPanoRegex.test(url)) {
                    log('检测到百度街景getPanoInfo XHR请求');
                    handleXHRPanoResponse(xhr, 'baidu');
                } else if (tencentPanoRegex.test(url)) {
                    log('检测到腾讯街景getQQPanoInfo XHR请求');
                    handleXHRPanoResponse(xhr, 'tencent');
                } else if (googlePanoRegex.test(url)) {
                    log('检测到谷歌街景XHR请求');
                    handleXHRPanoResponse(xhr, 'google');
                }
            });

            return originalSend.apply(this, arguments);
        };

        return xhr;
    };

    // 处理XHR街景响应
    function handleXHRPanoResponse(xhr, mapType) {
        const urlObj = new URL(xhr._url);
        let panoId = '';

        if (mapType === 'baidu' || mapType === 'tencent') {
            panoId = urlObj.searchParams.get('pano');
        } else if (mapType === 'google') {
            // 谷歌街景的响应非常无序复杂，需要正则表达式判断，暂时不做
            panoId = '无';
        }

        log(`${mapType === 'baidu' ? '百度' : mapType === 'tencent' ? '腾讯' : '未知'}街景XHR请求的Pano ID:`, panoId);

        try {
            // 解析响应
            const responseText = xhr.responseText;

            let jsonData;
            try {
                jsonData = JSON.parse(responseText);

                log(`${mapType === 'baidu' ? '百度' : mapType === 'tencent' ? '腾讯' : '谷歌'}街景XHR响应JSON:`, jsonData);
            } catch (parseError) {
                // 不是JSON格式，则一定是谷歌
                log(`谷歌响应JSON:`, jsonData);
            }
        }
         catch (error) {
            error('处理XHR请求出错:', error);
        }
    }
})();

const BAIDU_AK = '';// AK

function fetchLocationInfo(lat, lng) {

    if (window.BMap) {
        doGeocode(lat, lng);
        return;
    }

    const script = document.createElement('script');
    script.src = `https://api.map.baidu.com/api?v=3.0&ak=${BAIDU_AK}&callback=initBaiduMap`;
    script.type = 'text/javascript';
    document.head.appendChild(script);
    window.initBaiduMap = function() {
        doGeocode(lat, lng);
    };

    // 超时处理
    setTimeout(() => {
        if (!window.BMap) {
            error("百度 API 超时");
    }, 5000);
}

// 执行逆地理编码
function doGeocode(lat, lng) {
    const locationInfo = document.getElementById('tuxun-location-info');
    const locationStatus = document.getElementById('tuxun-location-status');

    try {
        const point = new BMap.Point(lng, lat);
        const convertor = new BMap.Convertor();
        const points = [point];
        // 后续如果要支持谷歌街景，会发现谷歌街景没有百度坐标系。所以这里使用 BGS 坐标系转换为百度坐标系，而不是直接使用响应信息中的百度坐标系

        convertor.translate(points, 1, 5, (data) => {
            if (data.status === 0) {
                const bdPoint = data.points[0];
                const geoc = new BMap.Geocoder();
                geoc.getLocation(bdPoint, (rs) => {
                    const address = rs.addressComponents;
                    log(address);
                });
            } else {
                throw new Error('坐标转换失败:' + data.status);
            }
        });
    } catch (error) {
        error('位置解析失败:', error);
    }
}