I am making a extension which works on youtube , what it does is that if comments are turned off it replaces the Comments are turned off. Learn more with a input box . How do i achieve this ?

my js code so far :

document.addEventListener('DOMContentLoaded', function() {
  console.log("DOM content loaded. Checking comments status...");

  function checkCommentsStatus() {
    const addCommentElement = document.querySelector('yt-formatted-string#text');
    console.log("Found 'Add a comment' element:", addCommentElement);
    if (addCommentElement && addCommentElement.textContent.trim() === "Add a comment...") {
      console.log("Comments are turned on.");
    } else {
      console.log("Comments are turned off. Modifying...");


      const container = document.createElement('div');
      container.setAttribute('id', 'comment-modification-container'); 

      
      const textBox = document.createElement('input');
      textBox.setAttribute('type', 'text');
      textBox.setAttribute('placeholder', 'Enter your comment');
      textBox.style.marginRight = '10px';

      
      const submitButton = document.createElement('button');
      submitButton.textContent = 'Submit';
      submitButton.addEventListener('click', () => {
        console.log("Submit button clicked.");
      });

      
      container.appendChild(textBox);
      container.appendChild(submitButton);

      // Find the element containing the "Comments are turned off" text
      const commentsOffElement = document.querySelector('yt-formatted-string#message');
      
      
      if (commentsOffElement && commentsOffElement.textContent.trim() === "Comments are turned off.") {
        commentsOffElement.parentNode.replaceChild(container, commentsOffElement);
        console.log("Text box and submit button added successfully.");
      } else {
        console.log("Failed to find the 'Comments are turned off' element to replace with the text box and submit button.");
      }
    }
  }

  checkCommentsStatus();
});

here’s what i’ve tried so far:

created a content script that listens for the domcontentloaded event to ensure the page is fully loaded.
implemented a function (checkcommentsstatus) to check if comments are turned on or off by searching for specific elements in the youtube video page.
utilized console.log statements throughout the code to track the script's execution and debug any issues.

what i got :

script sometimes fails to detect when comments are disabled or cannot find the appropriate elements to modify