big address bar for use in chrome with tampermonkey

bigaddressbar.js

// ==UserScript==
// @name         Big address bar
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  presents a big address bar with ctrl+L
// @author       You
// @match        http://localhost/*
// @grant        none
// @require      https://code.jquery.com/jquery-3.6.0.slim.min.js
// ==/UserScript==

(function() {
  'use strict';
  $("body").keypress(e => {
    if (e.key !== "l" || e.ctrlKey !== true) return
    $("body").append(`<div id="bghide" style="background-color: rgba(0,0,0,0.9); position: absolute; top:0; height: 100%; width: 100%; z-index:10000" ></div>`)
    $("body").append(`<div id="input" style="background-color: white;
      color: black;
      font-weight: bold;
      font-size: 30px;
      border: 8px solid grey;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: 80%;
      padding: 20px; z-index:10001">
        <span
          class="input"
          role="textbox"
          contenteditable="plaintext-only"
          ></span>
      </div>`)
    $("#input span").focusout(() => $("#bghide, #input").remove())
    $("#input span")[0].focus()
    $("#input span")[0].textContent = decodeURI(window.location.href)
    $("#input span").keypress(e => {
      if (e.key !== "Enter") return
      window.location.href = $("#input span")[0].textContent
    })
  })
})();