#Popup breaks after moving code

33 messages · Page 1 of 1 (latest)

devout bluff
#

Hey, so I have a browser extension

function App() {
  const onAddButtonClick = async () =>
  {
      let [tab] = await chrome.tabs.query({active: true});
      chrome.scripting.executeScript({
        target: {tabId: tab.id!},
        func: AddButton
      }); 
  }

  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  const handleSave = (input1: string, input2: string) => {
    console.log('Input 1:', input1);
    console.log('Input 2:', input2);
    setIsOpen(false); // Close the popup after saving
  };

  return (
    <>
      <h1>MessengerEncryptor</h1>
      <div className="card">
        <button onClick={() => SaveContacts()}>
          Save contacts
        </button>
        <button onClick={() => LoadContacts()}>
          Load contacts
        </button>
        <br></br>
        <button onClick={() => onAddButtonClick()}>
          Add button
        </button>
        <br></br>
        <button onClick={handleOpen}>Open Popup</button>
      <Popup isOpen={isOpen} onClose={handleClose} onSave={handleSave} name=""/>
      </div>
    </>
  )
}

and it works, but as soon as i move

 const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  const handleSave = (input1: string, input2: string) => {
    console.log('Input 1:', input1);
    console.log('Input 2:', input2);
    setIsOpen(false); // Close the popup after saving
  };

outside this function it breaks and nothing displays

shrewd shore
#

@devout bluff You can't move react hooks outside of components.

devout bluff
#

hmm okey

#

then is there a way to open this popup form outside that function?

shrewd shore
#

What are you trying to do, exactly?

devout bluff
#

okay so what im doing rn

#

is im adding a button to the element on some website

#

i want to open a popup after clicking that button

# 
function AddButton()
{
  const nameBoxPath = "/html/body/div[1]/div/div[1]/div/div[3]/div/div/div[1]/div[1]/div[2]/div/div/div/div/div/div/div/div/div/div[1]/div/div/div[1]/div";
      
  var nameBox = document.evaluate(nameBoxPath,document,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;

  if(nameBox !== null)
  {
      var button = document.querySelectorAll(".copy_contact_button")
      if(button.length > 0)
      {
        alert("Button already exists");
      }
      else
      {
        alert("Button created");
        var btn = document.createElement("button");
        btn.classList.add("copy_contact_button");
        btn.appendChild(document.createTextNode("Copy"));
        btn.addEventListener('click', () =>
        {
          
        });
        nameBox?.appendChild(btn);
      }
  }
  else
  {
    alert("Name box not found");
  }
}
#

thats my code for adding that button

# 
btn.addEventListener('click', () =>
        {
          
        });
#

so here i would like to open that popup

shrewd shore
#

Maybe you can dispatch an event on the window and have the react app listen for it

devout bluff
shrewd shore
#

Add an event listener in a useEffect call

devout bluff
# 
tn.addEventListener('click', () =>
        {
          alert("event");
          const event = new Event('openPopup');
          window.dispatchEvent(event); // Dispatch the event
        });
# 
const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const handleOpenPopup = () => {
      setIsOpen(true);
    };

    window.addEventListener('openPopup', handleOpenPopup);

    return () => {
      window.removeEventListener('openPopup', handleOpenPopup);
    };
  }, []);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  const handleSave = (input1: string, input2: string) => {
    console.log('Input 1:', input1);
    console.log('Input 2:', input2);
    setIsOpen(false); // Close the popup after saving
  };

  return (
    <>
      <h1>MessengerEncryptor</h1>
      <div className="card">
        <button onClick={() => SaveContacts()}>
          Save contacts
        </button>
        <button onClick={() => LoadContacts()}>
          Load contacts
        </button>
        <br></br>
        <button onClick={() => onAddButtonClick()}>
          Add button
        </button>
        <br></br>
        <button onClick={handleOpen}>Open Popup</button>
      <Popup isOpen={isOpen} onClose={handleClose} onSave={handleSave} name=""/>
      </div>
    </>
  )
#

so it looks like this now

#

and after clicking that button

tn.addEventListener('click', () =>
        {
          alert("event");
          const event = new Event('openPopup');
          window.dispatchEvent(event); // Dispatch the event
        });
#

it doesnt open the popup

#

only the alert fires

shrewd shore
#

That looks reasonable to me; are you sure that the React application code has run and that App setup its event listener?

#

And is App actually running in the same window as the button?

devout bluff
#

from my understanding at least

#

app runs in the popup that opens when u click on the extension icon

#

and that button runs on the website

#

cuz its added there

shrewd shore
#

You're probably going to need to look for something extension specific.

shrewd shore
#

!close