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();
})();

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