guidsen Posts - Answer Overflow

guidsen

•Created by guidsen on 3/25/2024 in #🔰newbie

Inserting element on click within a Content Script

Hi all, I'm having a React Component that add a click event listener on the body. When I click on a element, I want to show a dropdown below with a couple of options. How do I do this? Currently I have:

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
      }]
    });
  }
})

But I get the error Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' I assume this has to do with the fact that the JSX element is not transformed or so. How to fix?

2 replies

Gaming

Programming