UserScript: Extract and display list of countries of Doodles

doodlecountries.js

// ==UserScript==
// @name         Doodle Countries
// @namespace    https://gist.github.com/oldherl
// @version      0.1.1
// @description  Extract and display list of countries of Doodles
// @author       oldherl (with Copilot)
// @match        https://doodles.google/doodle/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Get the map-container div element
    const mapContainerDiv = document.querySelector('.map-container');
    if (mapContainerDiv) {
        // Get the mapChart div element
        const mapChartDiv = mapContainerDiv.querySelector('.mapChart');
        if (mapChartDiv) {
            // Get the data-countries attribute value
            const dataCountries = mapChartDiv.getAttribute('data-countries');
            if (dataCountries) {
                // Parse the JSON data
                const countriesArray = JSON.parse(dataCountries);
                // Sort the countries by longitude
                countriesArray.sort((a, b) => a.longitude - b.longitude);
                // Extract sorted country names
                const countryNames = countriesArray.map(country => (country.id + '(' + country.country_code + ')')).join(', ');
                // Create a new DOM element to display the country names
                const countryListDiv = document.createElement('div');
                countryListDiv.textContent = `${countriesArray.length} Sorted by Longitude: ${countryNames}`;
                // Style the new element (optional)
                countryListDiv.style.marginTop = '0px';
                countryListDiv.style.padding = '10px';
                countryListDiv.style.backgroundColor = '#ffffffa0';
                countryListDiv.style.border = '1px solid #ccc';
                // Insert the new element before the mapChart div
                mapContainerDiv.insertBefore(countryListDiv, mapChartDiv);
                console.log(countryListDiv.textContent)
            } else {
                console.log('No data-countries attribute found.');
            }
        } else {
            console.log('No mapChart div found.');
        }
    } else {
        console.log('No map-container div found.');
    }
})();