A userscript that adds additional features for route planning on Komoot.com.
当前为
A userscript for Komoot.com that adds additional features for route planning.
[!WARNING] This is currently an experimental project or proof-of-concept. It may contain bugs or incomplete features, and is not intended for production use. Breaking changes may be made at any time. Consider more stable alternatives for critical applications.
Using Komoot for route planning? This script may help. It runs in your browser and adds additional features to the site to help you plan your next adventure.
 |
|---|
| Komoot's route list page with Komodo - v0.1.0 |
[!CAUTION] For security reasons, I do not recommend running scripts from the internet unless you understand what they are doing. If you are not a developer, I recommend reading the comments in the code and/or asking a LLM like ChatGPT or Claude to explain it to you.
I recommend using this script with a userscript manager because it will keep the script up-to-date and run it automatically when you visit the appropriate page. If you don't want to do that, you can also run it manually.
A userscript manager is a browser extension that allows you to organize and run scripts on websites. If you don't already have one, I would recommend Violentmonkey, Tampermonkey, ScriptCat, or Greasemonkey. For more choices, see this comparison table.
Once installed, you can click the button below to install the latest version of the script:
You can also install a specific version of the script on the releases page.
[!NOTE] This only works once. If the page gets reloaded or you navigate away and come back, you will have to run the script again. If you want to run the script automatically, I suggest using a userscript manager.
Alternatively, you can run the script by going to a supported page, copying the code in dist/komodo.user.js, and pasting it into your browser's devtools console. The following pages are supported:
All UI elements added to the Komoot website have a lizard icon (🦎) in the top right corner so they can be easily identified.
Tags can be added to a route by including a specially formatted label in the route name using the Komoot website or app as usual. There is currently no visual editor for tags.
Each tag must be in the format [tagName:tagValue] and adhere to the following formatting rules:
[status:WIP] My Route [direction:north])
[status:WIP] is different from [status:wip])[a:b], [a: b], and [ a : b ] are all equivalent)[Start Point:Home])[, ], and : are not allowed in tag names and values because they are used to delimit tags. Emojis, spaces, and all other characters are allowed (ex. [🚗:💨] is valid)For example, setting a route name to [status:WIP] My Route [Start_Point:Home] [direction:north] will add the following tags to the route:
This script uses the tags found in the route list to populate the filter controls.
By default, Komoot only loads a handful of routes at a time, so if you notice that some tag names/values are missing from the filter controls, click the Load All Routes button to force load the entire list of routes. This may take a few seconds to complete.
On the route list page, you can filter routes by tag.
Details:
Filter by section for each tag name. You can filter by multiple tag names at once.This script adds various classes, ids, data attributes, and CSS variables to the elements it creates or modifies. You can use these to further customize the appearance of the UI. To add custom CSS to pages, you can use a user style manager like Stylus.
For example, you could use the following CSS to change the background color and add an emoji to all pills with the name status and the value wip:
.komodo-pill[data-komodo-tag-name='status'][data-komodo-tag-value='WIP'] {
background: orange;
& > div::before {
content: '🚧 ';
font-size: x-small;
}
}
 |
|---|
| Custom pills on the route list page - v0.1.0 |
Refer to the following files for details on the attributes added:
HTML select elements have their id set to an escaped version of the tag name which can be used for styling. For simple tag names like status, the id will also be status. For tag names with spaces or special characters like start point, the id will be something like start_u0020_point. It's probably easiest to inspect the element in your browser's dev tools to see what the id is if you want to use these values.
Tags pills have multiple children so that you can style the name, value, and separator separately. This is handy because you can use an easy to type tag name like loc, but use CSS to replace the original value with something more readable like Location or even an emoji like 📍. You can even hide parts of the tag completely to save space if you wish.
For a more complete example, see [https://cdn.jsdelivr.net/gh/jerboa88/komodo/examples/custom-styles-for-komodo.user.css]. These are similar to the styles I am actually using:
 |
|---|
| Kitchen sink styles ([https://cdn.jsdelivr.net/gh/jerboa88/komodo/examples/custom-styles-for-komodo.user.css]) on the route list page - v0.2.0 |
Some browsers prevent you from pasting code in the console because it could be malicious. This is called Paste Protection and you can read more about it on the Chrome for Developers Blog.
If this happens, follow the instructions in the console to re-enable pasting, and then try again. For Chrome, the following steps should work:
See this video for a visual walkthrough.
Uncaught SyntaxError: Unexpected identifier error when running the scriptMake sure that you select the entire file with Ctrl + A when copying it. If part of the script is cut off, it won't work.
If you encounter any problems with the script, feel free to create an issue.
Pull requests, bug reports, translations, and other kinds of contributions are greatly appreciated. By contributing code, you agree to license your contributions under the terms of the [LICENSE].
This project is written in TypeScript and uses Vite and vite-plugin-monkey to bundle the code into a single file that can be installed as a userscript.
We use Bun for package management. You can use another package manager if you want, but you'll have to replace refererences to bun or bunx in the following places:
package.json.husky/*.github/workflows/*The Conventional Commits specification is used for commit messages. These conventions are enforced using Commitlint via Husky pre-commit hooks.
Commitizen is set up as well, so you can use bun commit to commit changes using an interactive prompt instead of git commit.
Biome is used for linting and formatting.
Semantic Release is used to automate the release process.
To work on the project locally, first clone the repository and run bun install to install the dependencies.
To build the script, run bun run build. This will create a dist folder with the compiled script.
To run the script in development mode, run bun run dev. This will start a development server that will watch for changes and rebuild the script automatically.
This project is licensed under the MIT License. See [LICENSE] for details.
The project logo is from the Fluent Emoji collection, licensed under the MIT License.
This project is not affiliated with or endorsed by Komoot in any way.
Find this project useful? Sponsoring me will help me cover costs and commit more time to open-source.
If you can't donate but still want to contribute, don't worry. There are many other ways to help out, like:
I appreciate the support!
[https://cdn.jsdelivr.net/gh/jerboa88/komodo/examples/custom-styles-for-komodo.user.css]: https://cdn.jsdelivr.net/gh/jerboa88/komodo/examples/custom-styles-for-komodo.user.css [LICENSE]: LICENSE
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址