Easily download komoot tours as GPX
// ==UserScript==
// @name Komoot Tour Downloader
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Easily download komoot tours as GPX
// @author Ulysses
// @match https://www.komoot.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=komoot.com
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const downloadGPXToken = "Download GPX";
const BASIC_URL_REGEX =
/https:\/\/www.komoot.([a-z]+)(\/[a-z][a-z]-[a-z][a-z])?/;
const TOUR_URL_REGEX =
/https:\/\/www.komoot.([a-z]+)(\/[a-z][a-z]-[a-z][a-z])?\/(tour|smarttour)\/([a-z0-9]+)/;
const getId = () => {
const match = window.location.href.match(TOUR_URL_REGEX);
if (match === null) {
return undefined;
}
const [, , , , id] = match; // Use the match variable directly
return id;
};
const getName = () => document.title.split("|")[0];
const containsGPX = () => getId() !== undefined;
const getPositionsFromMainPage = async () => {
const response = await fetch(window.location.href, {
headers: {
accept:
"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
"accept-language": "es-ES,es;q=0.9,en;q=0.8,ca;q=0.7",
"cache-control": "max-age=0",
"sec-ch-ua":
'" Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"',
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": '"macOS"',
"sec-fetch-dest": "document",
"sec-fetch-mode": "navigate",
"sec-fetch-site": "same-origin",
"sec-fetch-user": "?1",
"upgrade-insecure-requests": "1",
},
referrerPolicy: "strict-origin-when-cross-origin",
body: null,
method: "GET",
mode: "cors",
credentials: "include",
});
const html = await response.text();
const regex = /kmtBoot.setProps\("(.*)"\)/m;
const regexResult = regex.exec(html);
const jsonText = regexResult[1].replace(/\\"/gm, '"').replace(/\\"/gm, '"');
const json = JSON.parse(jsonText);
return json.page._embedded.tour._embedded.coordinates.items;
};
const buildGPX = (
id,
name,
positions
) => `<?xml version="1.0" encoding="UTF-8"?>
<gpx creator="Komoot Extension" version="1.1"
xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/11.xsd"
xmlns:ns3="http://www.garmin.com/xmlschemas/TrackPointExtension/v1"
xmlns="http://www.topografix.com/GPX/1/1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ns2="http://www.garmin.com/xmlschemas/GpxExtensions/v3">
<trk>
<name>${id} - ${name}</name>
<type>cycling</type>
<trkseg>
${positions
.map(
(position) => `<trkpt lat="${position[`lat`]}" lon="${position[`lng`]}">
<ele>${position[`alt`]}</ele>
</trkpt>`
)
.join("")}
</trkseg>
</trk>
</gpx>`;
const configureAsBubble = (container) => {
container.style.background = "white";
container.style.border = "1px solid #00c300";
container.style.borderRadius = "8px";
container.style.padding = "5px 10px 5px 10px";
};
const createButton = (
document,
onDownload,
configureAsBubble,
downloadGPXToken
) => {
const button = document.createElement("button");
button.setAttribute("name", "ke-download-button");
configureAsBubble(button);
button.onclick = onDownload;
const buttonContent = document.createElement("div");
buttonContent.style.display = "flex";
const spinner = document.createElement("div");
spinner.innerHTML = `<svg viewBox="0 0 32 32" width="24" height="24" stroke-width="4" fill="none" stroke="currentcolor" role="img" class="css-yay0ma">
<title>loading</title>
<circle cx="16" cy="16" r="12" opacity="0.125"></circle>
<circle cx="16" cy="16" r="12" stroke-dasharray="75.39822368615503" stroke-dashoffset="56.548667764616276" class="css-wpcq6n"></circle>
</svg>`;
spinner.style.display = "none";
spinner.setAttribute("name", "ke-spinner");
buttonContent.append(spinner);
const image = document.createElement("div");
image.innerHTML = `<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzY3IiBoZWlnaHQ9IjM2NyIgdmlld0JveD0iMCAwIDM2NyAzNjciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjE4My41IiBjeT0iMTgzLjUiIHI9IjE4My41IiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMl80KSIvPgo8cGF0aCBkPSJNODMgMTAyLjJDODMgOTEuMDkgOTIuMDkgODIgMTAzLjIgODJIMjY0LjhDMjcwLjE1NyA4MiAyNzUuMjk1IDg0LjEyODIgMjc5LjA4NCA4Ny45MTY0QzI4Mi44NzIgOTEuNzA0NyAyODUgOTYuODQyNiAyODUgMTAyLjJWMjYzLjhDMjg1IDI2OS4xNTcgMjgyLjg3MiAyNzQuMjk1IDI3OS4wODQgMjc4LjA4NEMyNzUuMjk1IDI4MS44NzIgMjcwLjE1NyAyODQgMjY0LjggMjg0SDEwMy4yQzk3Ljg0MjYgMjg0IDkyLjcwNDcgMjgxLjg3MiA4OC45MTY0IDI3OC4wODRDODUuMTI4MiAyNzQuMjk1IDgzIDI2OS4xNTcgODMgMjYzLjhWMTAyLjJaTTIyNC40IDIyMy40SDI2NC44VjEwMi4ySDEwMy4yVjIyMy40SDE0My42QzE0My42IDIzNC41MSAxNTIuNjkgMjQzLjYgMTYzLjggMjQzLjZIMjA0LjJDMjA5LjU1NyAyNDMuNiAyMTQuNjk1IDI0MS40NzIgMjE4LjQ4NCAyMzcuNjg0QzIyMi4yNzIgMjMzLjg5NSAyMjQuNCAyMjguNzU3IDIyNC40IDIyMy40Wk0xNzMuOSAxNjIuOFYxMzIuNUgxOTQuMVYxNjIuOEgyMjQuNEwxODQgMjAzLjJMMTQzLjYgMTYyLjhIMTczLjlaIiBmaWxsPSJ3aGl0ZSIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzJfNCIgeDE9IjE4My41IiB5MT0iMCIgeDI9IjE4My41IiB5Mj0iMzY3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4RkNFM0MiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNjRBMzIyIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg=="/>`;
image.style.width = "20px";
image.setAttribute("name", "ke-logo");
buttonContent.append(image);
const text = document.createElement("span");
text.style.marginLeft = "8px";
text.innerText = downloadGPXToken;
buttonContent.append(text);
button.append(buttonContent);
return button;
};
const onDownload = async () => {
const id = getId();
const name = getName();
document.getElementsByName("ke-download-button").forEach((element) => {
element.disabled = true;
});
document.getElementsByName("ke-logo").forEach((element) => {
element.style.display = "none";
});
document.getElementsByName("ke-spinner").forEach((element) => {
element.style.display = "";
});
const positions = await getPositionsFromMainPage(id);
const gpx = buildGPX(id, name, positions);
const element = document.createElement("a");
element.setAttribute(
"href",
"data:application/gpx+xml;charset=utf-8," + encodeURIComponent(gpx)
);
element.setAttribute("download", id + ".gpx");
element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
document.getElementsByName("ke-download-button").forEach((element) => {
element.disabled = false;
});
document.getElementsByName("ke-logo").forEach((element) => {
element.style.display = "";
});
document.getElementsByName("ke-spinner").forEach((element) => {
element.style.display = "none";
});
};
const run = () => {
var observer = new MutationObserver(function (mutations) {
const shouldAddButton = containsGPX();
const downloadButtons = document.getElementsByName("ke-download-button");
const isButtonAlreadyAdded = downloadButtons.length > 0;
if (shouldAddButton && isButtonAlreadyAdded) return;
if (!shouldAddButton && isButtonAlreadyAdded) {
// Remove button
downloadButtons.forEach((button) => button.remove());
} else if (shouldAddButton && !isButtonAlreadyAdded) {
// Add button
const body = document.querySelector("body");
const target = body;
const container = document.createElement("div");
container.style.position = "absolute";
container.style.top = "60px";
container.style.right = "20px";
container.style.display = "flex";
container.style.flexDirection = "column";
container.style.alignItems = "end";
const button = createButton(document, onDownload, configureAsBubble, downloadGPXToken);
container.appendChild(button);
target.appendChild(container);
}
});
observer.observe(document, {
childList: true,
subtree: true, // needed if the node you're targeting is not the direct parent
});
};
run();
})();