PlonkViewer for GeoGuessr

Click on your marker to view google street view imagery at the location that you guessed!
当前为 2022-12-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         PlonkViewer for GeoGuessr
// @version      0.1.0
// @author       Han75
// @license      MIT
// @description  Click on your marker to view google street view imagery at the location that you guessed!
// @match        https://www.geoguessr.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=geoguessr.com
// @namespace    https://gf.qytechs.cn/en/users/973646
// ==/UserScript==

/**
 * IMPORTANT PLEASE READ THIS COMMENT. EXTENTION WILL NOT WORK IF YOU DONT.
 * This is a google street view API key. It is paid, but you can borrow geoguessr's API key for free. Follow these steps to do this:
 * 1. Start a game on geoguessr, then press F12 to open the developer tools menu. You may want to resize this menu to make it bigger
 * 2. Go to the "network" tab. If it's hidden, you may have to click the double arrows ">>" icon to find it.
 * 3. In the "filter" box, copy this phrase(Without the quotes): "ViewportInfoService"
 * 4. Click on the viewportinfoservice pop-up under the "Name" section.
 * 5. In the "general">"Request URL" section you should see something that looks like this:
 *  https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?...
 *      {Lots of random text and numbers}...&key=TheAPIKey_12345&token=119870
 *    in this case, the API key that we are interested in is "TheAPIKey_12345".
 *    copy the Key and paste it below where it says "KEY_HERE".
 */


const API_KEY = `AIzaSyDqRTXlnHXELLKn7645Q1L_5oc4CswKZK4`;
//GeoGuessr games API
const GEO_GAME_API = `https://www.geoguessr.com/api/v3/games/`;
//Google API endpoint that finds the nearest street view location.
//Returns closest latlong in under the key ["location"]["lat"], ["location"]["lng"]
const ENDPOINT_NearestSV_API = `https://maps.googleapis.com/maps/api/streetview/metadata?key=${API_KEY}&radius=10000&location=`;
//Returns closest latlong in under the key ["location"]["lat"], ["location"]["lng"]
const ENDPOINT_BIGRADIUS_SV_API = `https://maps.googleapis.com/maps/api/streetview/metadata?key=${API_KEY}&radius=100000&location=`;
//The street view location. Add `{lattitude},{longitude}` to this.
const ENDPOINT_SV_URL = `https://google.com/maps?q&layer=c&cbll=`;

async function latlngToGSV(lat, lng) {
    let dataURL = `${ENDPOINT_NearestSV_API}${lat},${lng}`;
    let res = await fetch(dataURL);
    let data = await res.json();
    let retURL = "";
    //If there are no results, return the eifel tower street view.
    if(data["status"] === "ZERO_RESULTS"){
        let dataaURL = `${ENDPOINT_BIGRADIUS_SV_API}${lat},${lng}`;
        let ress = await fetch(dataaURL);
        let dataa = await ress.json();
        if(dataa["status"]==="ZERO_RESULTS"){
            retURL = "https://google.com/maps?q&layer=c&cbll=48.8568513,2.2967612";
        }else{
            retURL = `${ENDPOINT_SV_URL}${dataa["location"]["lat"]},${dataa["location"]["lng"]}`;
        }
    }else{
        retURL = `${ENDPOINT_SV_URL}${data["location"]["lat"]},${data["location"]["lng"]}`;
    }
    return retURL;
}
async function getPlayerGuesses() {
    let gameID = document.querySelector('meta[property="og:url"]').getAttribute("content").split("/")[4];
    let dataURL = `${GEO_GAME_API}${gameID}`;
    let res = await fetch(dataURL);
    let data = await res.json();
    return data["player"]["guesses"];
}

window.onload = (e) => {
    // Select the target node (the element to be monitored for changes)
    let targetNode = document.body;
    let stopRepeat=false;
    // Options for the observer (which mutations to observe)
    let config = { attributes: true, childList: true, subtree: true };

    // Callback function to execute when mutations are observed
    let callback = function (mutationsList, observer) {
        // Get all divs with the desired attribute
        if (API_KEY!=="KEY_HERE" && document.querySelector('meta[property="og:url"]').getAttribute("content").split("/")[3] === "game") {
            let divs = document.querySelectorAll('div[data-qa="guess-marker"]');

            // If there are more than one divs, execute the desired function
            if (!stopRepeat && divs.length > 1) {
                stopRepeat=true;
                executeFunction();
            }
        }
    };

    // Create an observer instance linked to the callback function
    let observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);

    async function executeFunction() {
        let playerMarkers = document.querySelectorAll('div[data-qa="guess-marker"]');
        let playerGuesses = await getPlayerGuesses();
        console.log(playerGuesses);
        if(playerGuesses===undefined||playerGuesses.length===undefined){
            return;
        }
        for (let i = 0; i < playerGuesses.length; i++) {

            let lat = playerGuesses[i]["lat"];
            let lng = playerGuesses[i]["lng"];
            let streetViewURL = await latlngToGSV(lat, lng);
            playerMarkers[i].addEventListener("click", function () {
                window.open(streetViewURL, "_blank");
            });
        }
    }
}
欢迎访问Greasy Fork镜像
