[js] 添加一个顶栏按钮，实现点击即打开代码片段界面

最终实现的 JS 代码片段：

/**
 * 在顶栏添加按钮，快捷打开代码片段界面 JS片段
 * 参考 https://ld246.com/article/1674026309504 修改，同时感谢 [Undii](https://ld246.com/member/Undii) 提供 帮助
 * 为顶栏增加代码片段按钮，点击后创建快捷键按下事件
 * 挂件模式支持点击日记列出笔记本。 https://ld246.com/article/1674026309504
 */
// 设置是否添加对应按钮
let g_addSnippets = true;// 设置

// 插入按钮
// 插入日历笔记本选择挂件 
// 参考: https://ld246.com/article/1662969146166  原作者: BryceAndJuly
// 参考: https://github.com/svchord/Rem-Craft 原作者: Seven Chor

function addSnippets() {
  let barMode = document.getElementById("barMode");
  barMode.insertAdjacentHTML(
    "afterend",
    '<div id="barSnippets_simulate" class="toolbar__item ariaLabel" aria-label="代码片段/Snippets"></div>'
  );
  let settingBtn = document.getElementById("barSnippets_simulate");
  settingBtn.innerHTML = `<svg><use xlink:href="#iconCode"></use></svg>`;

  settingBtn.addEventListener(
    "click",
    function (e) {
        dispatchKeyEvent("config");

        setTimeout(function() {
            // 找到包含 data-name="appearance" 的 <li> 元素
            var element = document.querySelector('li[data-name="appearance"]');
  
            // 创建一个点击事件
            var event = new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
            });
  
            // 触发点击事件
            element.dispatchEvent(event);
        }, 100); // 1000毫秒 = 1秒

        setTimeout(function() {
            // 获取按钮元素
            var button = document.getElementById('codeSnippet');
  
            // 创建一个新的点击事件
            var clickEvent = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true
            });
  
            // 触发按钮的点击事件
            button.dispatchEvent(clickEvent);
  
        }, 200); // 1000毫秒 = 1秒
    }
  );
}


/**
 * 
 */
function dispatchKeyEvent(functionName) {
  let keyInit = parseHotKeyStr(window.top.siyuan.config.keymap.general[functionName].custom);
  keyInit["bubbles"] = true;
  let keydownEvent = new KeyboardEvent('keydown', keyInit);
  document.getElementsByTagName("body")[0].dispatchEvent(keydownEvent);
  let keyUpEvent = new KeyboardEvent('keyup', keyInit);
  document.getElementsByTagName("body")[0].dispatchEvent(keyUpEvent);
}

/**
 * 
 * @param {*} hotkeyStr 思源hotkey格式 Refer: https://github.com/siyuan-note/siyuan/blob/d0f011b1a5b12e5546421f8bd442606bf0b5ad86/app/src/protyle/util/hotKey.ts#L4
 * @returns KeyboardEventInit Refer: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/KeyboardEvent
 */
function parseHotKeyStr(hotkeyStr) {
  let result = {
    ctrlKey: false,
    altKey: false,
    metaKey: false,
    shiftKey: false,
    key: 'A',
    keyCode: 0
  }
  if (hotkeyStr == "" || hotkeyStr == undefined || hotkeyStr == null) {
    console.error("解析快捷键设置失败", hotkeyStr);
    throw new Error("解析快捷键设置失败");
  }
  let onlyKey = hotkeyStr;
  if (hotkeyStr.indexOf("⌘") != -1) {
    result.ctrlKey = true;
    onlyKey = onlyKey.replace("⌘", "");
  }
  if (hotkeyStr.indexOf("⌥") != -1) {
    result.altKey = true;
    onlyKey = onlyKey.replace("⌥", "");
  }
  if (hotkeyStr.indexOf("⇧") != -1) {
    result.shiftKey = true;
    onlyKey = onlyKey.replace("⇧", "");
  }
  // 未处理 windows btn （MetaKey） 
  result.key = onlyKey;
  // 在https://github.com/siyuan-note/siyuan/commit/70acd57c4b4701b973a8ca93fadf6c003b24c789#diff-558f9f531a326d2fd53151e3fc250ac4bd545452ba782b0c7c18765a37a4e2cc
  // 更改中，思源改为使用keyCode判断快捷键按下事件，这里进行了对应的转换
  // 另请参考该提交中涉及的文件
  result.keyCode = keyCodeList[result.key];
  console.assert(result.keyCode != undefined, `keyCode转换错误,key为${result.key}`);
  switch (result.key) {
    case "→": {
      result.key = "ArrowRight";
      break;
    }
    case "←": {
      result.key = "ArrowLeft";
      break;
    }
    case "↑": {
      result.key = "ArrowUp";
      break;
    }
    case "↓": {
      result.key = "ArrowDown";
      break;
    }
    case "⌦": {
      result.key = "Delete";
      break;
    }
    case "⌫": {
      result.key = "Backspace";
      break;
    }
    case "↩": {
      result.key = "Enter";
      break;
    }
  }
  return result;
}

if (g_addSnippets) addSnippets();

const keyCodeList = {
  "⌫": 8,
  "⇥": 9,
  "↩": 13,
  "⇧": 16,
  "⌘": 91,
  "⌥": 18,
  "Pause": 19,
  "CapsLock": 20,
  "Escape": 27,
  " ": 32,
  "PageUp": 33,
  "PageDown": 34,
  "End": 35,
  "Home": 36,
  "←": 37,
  "↑": 38,
  "→": 39,
  "↓": 40,
  "PrintScreen": 44,
  "Insert": 45,
  "⌦": 46,
  "0": 48,
  "1": 49,
  "2": 50,
  "3": 51,
  "4": 52,
  "5": 53,
  "6": 54,
  "7": 55,
  "8": 56,
  "9": 57,
  "A": 65,
  "B": 66,
  "C": 67,
  "D": 68,
  "E": 69,
  "F": 70,
  "G": 71,
  "H": 72,
  "I": 73,
  "J": 74,
  "K": 75,
  "L": 76,
  "M": 77,
  "N": 78,
  "O": 79,
  "P": 80,
  "Q": 81,
  "R": 82,
  "S": 83,
  "T": 84,
  "U": 85,
  "V": 86,
  "W": 87,
  "X": 88,
  "Y": 89,
  "Z": 90,
  "ContextMenu": 93,
  "MyComputer": 182,
  "MyCalculator": 183,
  ";": 186,
  "=": 187,
  ",": 188,
  "-": 189,
  ".": 190,
  "/": 191,
  "`": 192,
  "[": 219,
  "\\": 220,
  "]": 221,
  "'": 222,
  "*": 106,
  "+": 107,
  "-": 109,
  ".": 110,
  "/": 111,
  "F1": 112,
  "F2": 113,
  "F3": 114,
  "F4": 115,
  "F5": 116,
  "F6": 117,
  "F7": 118,
  "F8": 119,
  "F9": 120,
  "F10": 121,
  "F11": 122,
  "F12": 123,
  "NumLock": 144,
  "ScrollLock": 145
};
​

原贴：

看到个 帖子 ，添加按钮应该是这样：

function addSnippets() {
  let barMode = document.getElementById("barMode");
  barMode.insertAdjacentHTML(
    "afterend",
    '<div id="barSnippets_simulate" class="toolbar__item ariaLabel" aria-label="代码片段/Snippets" ></div>'
  );
  let settingBtn = document.getElementById("barSnippets_simulate");
  settingBtn.innerHTML = `<svg><use xlink:href="#iconCode"></use></svg>`;

  settingBtn.addEventListener("click", function() {
      openSnippets();
    }, false);
}

function openSnippets() {

}

addSnippets();
​

但是我不知道怎么打开代码片段界面