【Discord】Enter=改行, Ctrl+Enter=送信 にする Chrome 拡張

なぜ作ったのか

Slack や Teams では Ctrl + Enter で送信できるようにしているので Discord でもそうなるようにしたかったためです。
※Discord は Enter=送信、Shift + Enter=改行 というキーバインドになっており変更することができません。

ソースコード

manifest.json

{
  "manifest_version": 3,
  "version": "1.0",
  "name": "Send with Ctrl+Enter in Discord",
  "content_scripts": [
    {
      "matches": [
        "https://discord.com/*"
      ],
      "js": [
        "script.js"
      ]
    }
  ],
  "permissions": [
    "activeTab"
  ]
}

script.js

(() => {
  'use strict';

  const app = document.querySelector('#app-mount');
  const useCapture = true;
  app.addEventListener('keydown', (event) => {
    const isMsgTextbox = event.target.role === 'textbox' && event.target.ariaMultiline;
    if (isMsgTextbox === false) {
      return;
    }

    const pressedShiftEnter = event.shiftKey && event.key === 'Enter';
    if (pressedShiftEnter) {
      return;
    }

    const pressedEnter = event.altKey === false && event.ctrlKey === false && event.key === 'Enter';
    if (pressedEnter) {
      event.stopPropagation();
    }
  }, useCapture);

})();

解説

デフォルトの Enter 周りのキーバインドは以下のようになっています。
この表における No1 のみをキャンセルしています。

No	キー	送信	改行
1	Enter	○
2	Shift + Enter		○
3	Ctrl + Enter	○
4	Alt + Enter

メッセージ送信のイベントリスナは #app-mount に定義されているようでした。(ここ少し自信無いです...)
そのため、メッセージのテキストボックス以外ではデフォルトの挙動になるように event.target.role や event.target.ariaMultiline を見ています。
また、Shift + Enter もデフォルト通りに挙動になるように event.shiftKey と event.key を見ています。

その後、単体の Enter が押されたときイベント伝播をキャンセルすることで送信処理をキャンセルしています。