PD
🧩 Plasmo Developersguidsen

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?
Want results from more Discord servers?
Add your server
More Posts
I have a problem with shadow root - Hide & visibilityhi all ... I have a problem that, I want when I click the Extension icon the shadow root will activaHow do I get Vue devtools to work?I have not been successful in getting Vue devtools to work with Plasmo. I followed the instructions Bug : EAGAIN when use `plasmo package`EAGAIN when using `plasmo package` ``` % yarn package --verbose yarn run v1.22.22 warning package.jHow to customize parcel config?Hi everyone, I am trying to use a react-native based library called `react-native-reanimated`. This