mouseup イベント後、要素外で mousedown されるとイベントが発火せず困るので何とかしたい

やりたいこと

Chrome 拡張機能でボタンを埋め込んでいます。

ボタンがクリックされたことが視覚的に分かりやすいよう、マウスが押し込まれたらボタンの css を変更し、離されたら元に戻したい。

修正前のコード

脳死で mousedown, mouseup のイベントリスナーをそれぞれ登録していました

document.addEventListener('DOMContentLoaded', () => {
  const copyButton = document.getElementById('copyButton');

  // マウスが押し込まれたら css を変更
  copyButton.addEventListener('mousedown', function() {
      // 変更する css を記入
      // this.style.xxxxxxx
  });
  // マウスが離されたら css を戻す
  copyButton.addEventListener('mouseup', function() {
      // 元に戻すための css を記入
      // this.style.xxxxxxx
  });
});

mousedown イベントは正常に発火しました
※クリック時のデザインが駄目駄目なのは分かっていますので後で修正します

押し込んだボタンをすぐ離すのであれば、このコードでも問題なく動作します。
ですが開発者の想定通りにユーザーが動いてくれないのは世の常です。

このコードだとボタンを押し込んだままカーソルを copyButton 要素外に出してから離してしまうと mouseup イベントは発火しません。mouseup イベントリスナーは copyButtn に登録されたので、当然といえば当然なのですが…。

例え要素外で離されたとしても、正常に動作するよう修正したい

修正後のコード

マウスが押し込まれた時点で、document（画面全体）に mouseup イベントリスナーを登録
そうすることによって、画面のどこでマウスを離しても mouseup イベントが発火するようになります

mouseup イベントが発火した後は、document に登録された mouseup イベントリスナーを削除
※そうしないと、document で mouseup イベントが発火し続けてしまうため

コメント欄でご教示いただきましたが、once という超便利なオプションがあるようなのでそちらを利用するよう修正

document.addEventListener('DOMContentLoaded', () => {
  const copyButton = document.getElementById('copyButton');

  copyButton.addEventListener('mousedown', () => {
    // マウスが押し込まれたら CSS を変更する
    
    // 変更する css を記入
    // copyButton.style.xxxxxxx
    
    // documentでmouseupイベントを捕捉する（要素外でもイベントを補足出来るように）
    // 1回発火したら削除されるるよう、once オプションを指定
    document.addEventListener('mouseup', () => {
      // 元に戻すための css をここに記入
      // copyButton.style.xxxxxxx
     
    }, { once: true }););
  });
});

JavaScript、難しい