针对chrome扩展中popup弹窗控制页面的一些问题（萌新求助）

在实现了chrome页面图片以及按钮的更改，添加之后，便开始尝试使用popup来控制chrome页面，但经历多次的尝试还是无法实现，以下是我操作的步骤，希望大佬能指出我的问题。

首先呢我是找到popup.jsx这个文件，在这个里面进行修改，思路是在这个弹出框里设置一个按钮来控制chrome浏览器上面的Google search,和第一篇的文章目的一样，只不过把网页上的添加的按钮放到popup里面，思路清晰但是做的时候问题很多，我首先添加了一个button在return里面，

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />

        <a
          className="App-link"
          href="https://Google.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          Google.com
        </a>
        <button  >Click</button>


      </header>
    </div>
  );

接着我便开始尝试昨天的写法

const Popup = () => {
  const handleButtonClick = () => {
    const button = document.createElement('button');
   
    button.innerText = 'Switch Language';
    
    const searchElements = document.querySelectorAll('.gNO89b');
    searchElements.forEach((element) => {
      element.insertAdjacentElement('afterend', button);
    });
   

    button.addEventListener('click', (e) => {
      e.preventDefault();
      
     
      const targetElement = searchElements[1];
      
      if (targetElement.value === 'Google Search') {
        targetElement.value = '搜索';
        
      } else {
        targetElement.value = 'Google Search';
        
      }
    });
  }

但是却一直报错，尝试着查找问题，一遍遍的console.log去打印，点击按钮却没用，在了解过后发现是所追踪的元素的原因，我在return里面建立了一个button,但是却又按照昨天的操作步骤又建立了一个button,而且换找不到这个button,所以我便将return的button加上class

 


const searchElements = document.querySelectorAll('.llk');


<button className='llk' onClick={handleButtonClick} >Click</button>

但并不是我理想的结果，只是不停的增加按钮

 这时我的思路开始变了，想着建立一个click点击出来一个switch language,那我就可以用switch language按钮来控制网页Google search,

const Popup = () => {
  const handleButtonClick = () => {
    const button = document.createElement('button');
    console.log('7')
    button.innerText = 'Switch Language';
    console.log('56')
    const searchElements = document.querySelectorAll('.llk');
    searchElements.forEach((element) => {
      element.insertAdjacentElement('afterend', button);
    });
    console.log('123')

    button.addEventListener('click', (e) => {
      e.preventDefault();
      console.log('123555555')
      const searchElements = document.querySelectorAll('.gNO89b');
      const targetElement = searchElements[1];
      console.log('123955')
      if (targetElement.value === 'Google Search') {
        targetElement.value = '搜索';
        console.log('搜索');
      } else {
        targetElement.value = 'Google Search';
        console.log('语言：中文');
      }
    });
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <a
          className="App-link"
          href="https://Google.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          Google.com
        </a>
        <button className='llk' onClick={handleButtonClick} >Click</button>
      </header>
    </div>
  );
};

却发现只能打印到console.log('123955')，就一直困惑与我，希望哪位大佬可以帮忙指出我的问题，该怎么去解决，！！！！！！！！！！！！！！！！！！！