Makes the KeyBR Colemak Layout be Colemak-DH on an ANSI Keyboard. Install with TamperMonkey

KeyBR Colemak-DH ANSI.js

// ==UserScript==
// @name          KeyBR Colemak-DH
// @namespace     http://tampermonkey.net/
// @version       v1.1
// @description   Switch Colemak layout in keybr.com to Colemak DH
// @author        https://github.com/Zyst
// @match         https://www.keybr.com/
// @icon          https://www.google.com/s2/favicons?domain=keybr.com
// @grant         none
// @contributors  https://github.com/hilarycheng
// ==/UserScript==

(() => {
  "use strict";
  const KEYS_TO_REMAP = [
    { from: "T", to: "B" },
    { from: "G", to: "G" },
    { from: "H", to: "M" },
    { from: "Z", to: "X" },
    { from: "X", to: "C" },
    { from: "C", to: "D" },
    { from: "B", to: "Z" },
    { from: "M", to: "H" },
  ];

  const remapKey = ({ from, to }) => {
    document.querySelector(`svg[data-key='Key${from}'] > text`).innerHTML = to;
  };

  const remapKeys = () => {
    KEYS_TO_REMAP.forEach(remapKey);
  };

  const loopToFindKeyboard = () => {
    const kb = document.querySelector("main > div > div > svg");
    if (document.title === "Typing Practice" && kb) return remapKeys();
    setTimeout(loopToFindKeyboard, 500);
  };

  loopToFindKeyboard();
})();

This script doesn't work on current version of Keybr. Have it set with Colemak layout, tried Firefox with Tampermonkey and Violentmonkey as well as Chrome with Tampermonkey.

@viiibe unfortunately it seems the Keybr site got updated to use dynamic classnames:

I got a hacky update that should work for now, but it'll break if they change the site structure, I'll update the gist. As a note, you need to select Colemak as your layout in the options. This script only switches over the keys not covered by that.

Not, sure if it's helpful, but this is what I used with my ortholinear Colemak-DH layout.

const KEYS_TO_REMAP = [
    { from: "T", to: "B" },
    { from: "G", to: "G" },
    { from: "V", to: "D" },
    { from: "B", to: "V" },
    { from: "H", to: "M" },
    { from: "M", to: "H" },
  ];

Thanks for your work on this!

I cannot get this to work - the DH- keys "blinks" when typed, but the key is not registered/sent to the "text" i am supposed to type..
So the remapping of the character printed on the virtual-keyboard works, but clicking the key does not seem to send the correct command?

@epichub yea that's fully outside of my control, and not really in the scope of what I wanna cover here, sorry about that. If you find a solution please feel free to post about it here though.

I just modified a little bit. It avoid to use html class to search the site and modify the layout

// ==UserScript==
// @name KeyBR Colemak-DH
// @namespace http://tampermonkey.net/
// @Version v1.1
// @description Switch Colemak layout in keybr.com to Colemak DH
// @author https://github.com/Zyst
// @match https://www.keybr.com/
// @ICON https://www.google.com/s2/favicons?domain=keybr.com
// @grant none
// ==/UserScript==

(() => {
"use strict";
const KEYS_TO_REMAP = [
{ from: "T", to: "B" },
{ from: "G", to: "G" },
{ from: "H", to: "M" },
{ from: "Z", to: "X" },
{ from: "X", to: "C" },
{ from: "C", to: "D" },
{ from: "B", to: "Z" },
{ from: "M", to: "H" },
];

const remapKey = ({ from, to }) => {
var selector = svg[data-key='Key${from}'] > text;
console.log(selector);
document.querySelector(svg[data-key='Key${from}'] > text).innerHTML = to;
};

const remapKeys = () => {
KEYS_TO_REMAP.forEach(remapKey);
};

const loopToFindKeyboard = () => {
try {
if (document.title === 'Typing Practice' && window.location.href === 'https://www.keybr.com/' && document.querySelector("main").childNodes[0].childNodes[3].childNodes.length === 1) {
return remapKeys();
}
} catch (e) {
}
const kb = document.querySelector("main > div > div > div > svg");
if (kb) return remapKeys();
setTimeout(loopToFindKeyboard, 500);
};

loopToFindKeyboard();
})();
`

@hilarycheng can you format it using triple ticks? If it's an improvement I'll integrate it to the main script, but I can't read what changed right now.

Thanks. I seldom use the markdown.

// ==UserScript==
// @name KeyBR Colemak-DH
// @namespace http://tampermonkey.net/
// @Version v1.1
// @description Switch Colemak layout in keybr.com to Colemak DH
// https://github.com/author https://github.com/Zyst
// @match https://www.keybr.com/
// @ICON https://www.google.com/s2/favicons?domain=keybr.com
// @grant none
// ==/UserScript==

(() => {
"use strict";
const KEYS_TO_REMAP = [
{ from: "T", to: "B" },
{ from: "G", to: "G" },
{ from: "H", to: "M" },
{ from: "Z", to: "X" },
{ from: "X", to: "C" },
{ from: "C", to: "D" },
{ from: "B", to: "Z" },
{ from: "M", to: "H" },
];

const remapKey = ({ from, to }) => {
var selector = svg[data-key='Key${from}'] > text;
console.log(selector);
document.querySelector(svg[data-key='Key${from}'] > text).innerHTML = to;
};

const remapKeys = () => {
KEYS_TO_REMAP.forEach(remapKey);
};

const loopToFindKeyboard = () => {
try {
if (document.title === 'Typing Practice' && window.location.href === 'https://www.keybr.com/' && document.querySelector("main").childNodes[0].childNodes[3].childNodes.length === 1) {
return remapKeys();
}
} catch (e) {
}
const kb = document.querySelector("main > div > div > div > svg");
if (kb) return remapKeys();
setTimeout(loopToFindKeyboard, 500);
};

loopToFindKeyboard();
})();

@hilarycheng hey! Added the main > div > div > svg update, and the document.title update. Thanks for bringing that to my attention. I added you under a contributors tag to the script above.

Cheers.

@Zyst Thanks you