remap home and end for braindead downshift search combo box behaviour on MDN

remap_downshift_home_and_end.js

// ==UserScript==
// @name         remap home and end for downshift
// @namespace    http://rakslice.net/userscripts/remap_downshift_home_and_end
// @version      2024-08-06
// @description  remap home and end for braindead downshift search combo box behaviour on MDN
// @author       rakslice
// @match        https://developer.mozilla.org/*
// @grant        none
// @require https://code.jquery.com/jquery-3.7.1.min.js
// ==/UserScript==

(function() {
    'use strict';

    jQuery.noConflict();

    let $ = jQuery;

    function replaceEvent(e, key, keyCode, ctrlKey) {
        let newEvent = new KeyboardEvent(e.type, {
        bubbles: true,
        cancelBubble: false,
        cancelable: true,
        charCode: 0,
        key: key,
        keyCode: keyCode,
        which: keyCode,
        shiftKey: e.shiftKey,
        ctrlKey: ctrlKey,
        altKey: e.altKey,
        metaKey: e.metaKey});

        e.cancelBubble = true;
        e.stopImmediatePropagation();

        e.target.dispatchEvent(newEvent);
    }

    function handleKey(e) {
        if (e.key == "Home" && !e.ctrlKey) {
            replaceEvent(e, "ArrowLeft", 37, true);
        }
        if (e.key == "End" && !e.ctrlKey) {
            replaceEvent(e, "ArrowRight", 39, true);
        }
    }

    $(function() {
        let search = $('input.search-input-field');
        search[0].addEventListener('keydown', handleKey);
    });
})();

This remaps Home and End in the MDN search field to the normal text field navigation functions they have on platforms where Home and End are normally used.

Note that this also works with Shift for selection, but leaves Ctrl-Home and Ctrl-End as-is so you can still use those to scroll through the completions list, which is more consistent with key combinations behaviour on Home/End-using platforms