Inserting element on click within a Content Script

document.addEventListener('click', (e) => {
  console.log(selectedListRef);
  if (e.target?.localName === 'plasmo-csui') return;

  e.preventDefault();
  e.stopPropagation();

  if (selectedListRef.current) {
    // Selecting attributes mode
    console.log('Selected: ', e.target);

    const rect = e.target.getBoundingClientRect();
    const element = (
      <div
        className="bg-red-500 absolute p-2 shadow"
        style={{
          top: `${rect.top + window.scrollY}px`,
          left: `${rect.left + window.scrollX}px`,
        }}
      >
        Foo bar
      </div>
    )

    document.body.appendChild(element);

    setSelectedAttributes((prev) => {
      return [...prev, {
        selector: `${e.target?.tagName}.${e.target?.className}`,
        type: 'text',
        preview: e.target.innerText
      }]
    });
  }
})

document.addEventListener('click', (e) => {
  console.log(selectedListRef);
  if (e.target?.localName === 'plasmo-csui') return;

  e.preventDefault();
  e.stopPropagation();

  if (selectedListRef.current) {
    // Selecting attributes mode
    console.log('Selected: ', e.target);

    const rect = e.target.getBoundingClientRect();
    const element = (
      <div
        className="bg-red-500 absolute p-2 shadow"
        style={{
          top: `${rect.top + window.scrollY}px`,
          left: `${rect.left + window.scrollX}px`,
        }}
      >
        Foo bar
      </div>
    )

    document.body.appendChild(element);

    setSelectedAttributes((prev) => {
      return [...prev, {
        selector: `${e.target?.tagName}.${e.target?.className}`,
        type: 'text',
        preview: e.target.innerText
      }]
    });
  }
})