Как исправить кнопку для расширения Chrome

Question

У меня есть текстовое поле, которое вводит пользователь, и я пытаюсь реализовать кнопку, которая изменяет текст на странице в соответствии с тем, что вводит пользователь.

Я объявил кнопку, используя Submit Я также попытался запустить код без кнопки (такой, чтобы он изменял текст по мере того, как пользователь вводит его), и это, кажется, работает нормально.

    window.onload = function () {

      chrome.runtime.onMessage.addListener(gotMessage);

      function gotMessage(message, sender, sendResponse) {
        chrome.storage.sync.set({'text': message.txt});


      }
        document.addEventListener('DOMContentLoaded', function() {
          document.getElementById('submitComment').addEventListener('click', myFunction);
        })

        function myFunction(){
          chrome.storage.sync.get('text', function(getComment){
            if(getComment.text){
              let paragraphs = document.getElementsByTagName('p');
                for (elt of paragraphs) {
                    elt.innerHTML = getComment.text;
                }
            }
          });
        }
    }

After editing I have
window.onload = function () {
  chrome.runtime.onMessage.addListener(gotMessage);

  function gotMessage(message, sender, sendResponse) {
    chrome.storage.sync.set({'text': message.txt});
  }

  document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('submitComment').addEventListener('click', function(event){
      chrome.storage.sync.get('text', function(getComment){
        if (getComment.text){
          let paragraphs = document.getElementsByTagName('p');
          for (elt of paragraphs){
            elt.innerHTML = getComment.text;
          }
        }
      })
      event.preventDefault();
    })
  })
}

Прямо сейчас при нажатии кнопки ничего не происходит. Любая помощь будет оценена. Спасибо!