再訪時に出てこないです

Question

前提・実現したいこと

Chrome拡張機能でメモ機能を作ろうと思っています！

しかし一度メモを使ったページでは、リロードしたり再訪したときにメモが出てこなくなります。

const save = (content) => {//save(textbox.value)
  chrome.runtime.sendMessage(content, res => {
      console.log(res);
  });
};
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  const modalfrm = document.getElementById('ex-memo');
  if (modalfrm != null) return;
  const modal = document.createElement('div');
  modal.id = 'ex-memo';
  modal.style.zIndex = '2147483647';
  modal.style.position = 'fixed';
  modal.style.left = `${message.posX}px`;
  modal.style.top = `${message.posY}px`;
  console.log("modal.style.left:" + modal.style.left);
  console.log("modal.style.top:" + modal.style.top);
  console.log("modal.style.width:" + modal.style.width);
  console.log("modal.style.height:" + modal.style.height);
  const textbox = document.createElement('textarea');
  textbox.style.width = '600px';
  textbox.style.height = '200px';
  textbox.style.backgroundColor = 'rgb(67, 67, 67)';
  textbox.style.color = 'rgb(51, 166, 184)';
  textbox.value= message.content;
  modal.appendChild(textbox);
  const saveButton = document.createElement('button');
  saveButton.onclick = () => save(textbox.value);
  saveButton.innerText = '保存';
  modal.appendChild(saveButton);
  document.body.appendChild(modal);
  console.log("function");
  modal.addEventListener('mousedown', mdown);
  modal.addEventListener('touchstart', mdown);
  // "マウスが押された際の関数"
  function mdown(e){
      console.log("mdown");
      this.classList.add("drag");
      //タッチドイベントとマウスのイベントの差異を吸収
      if(e.type === "mousedown") {
          var event = e;
      } else {
          var event = e.changedTouches[0];
      }
      //要素内の相対座標を取得
      posX = event.pageX - this.offsetLeft;
      posY = event.pageY - this.offsetTop;
      //ムーブイベントにコールバック
      document.body.addEventListener("mousemove", mmove);
      document.body.addEventListener("touchmove", mmove);
  }
  // "マウスカーソルが動いたときに発火"
  function mmove(e){
      console.log("mmove");
      //ドラッグしている要素を取得
    　var drag = document.getElementsByClassName("drag")[0];
      //同様にマウスとタッチの差異を吸収
      if(e.type === "mousemove") {
          var event = e;
      } else {
          var event = e.changedTouches[0];
      }
      //フリックしたときに画面を動かさないようにデフォルト動作を抑制
      e.preventDefault();
      //マウスが動いた場所に要素を動かす
      drag.style.top = event.pageY - posY + "px";
      drag.style.left = event.pageX - posX + "px";
      //マウスボタンが離されたとき、またはカーソルが外れたとき発火
      drag.addEventListener("mouseup", mup);
      document.body.addEventListener("mouseleave", mup);
      drag.addEventListener("touchend", mup);
      document.body.addEventListener("touchleave", mup);

      // "マウスボタンが上がったら発火"
      function mup(e){
       console.log("mup");
       var drag = document.getElementsByClassName("drag")[0];
       //ムーブベントハンドラの消去
       document.body.removeEventListener("mousemove", mmove);
       drag.removeEventListener("mouseup", mup);
       document.body.removeEventListener("touchmove", mmove);
       drag.removeEventListener("touchend", mup);
       //クラス名 .drag も消す
       drag.classList.remove("drag");
      }
  }
});

エラー

カッコを入れて数えて下から8番目の「drag.removeEventListener("mouseup", mup);」でエラーになっています

Uncaught TypeError: Cannot read property ‘removeEventListener’ of undefined