I have a crxjs react application and I want to be able to communicate between popup and web page. I am succesfully sending the datas to webapp from the extension but I could not fully able to place the datas into the fields. Variables using useState hook does not work, useRef variables works correctly.
import { PhotoIcon, UserCircleIcon } from "@heroicons/react/24/solid";
import React, { useRef, useState, useEffect } from "react";
import "./form.css";
export const Form = () => {
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const usernameRef = useRef();
const aboutRef = useRef();
const [country, setCountry] = useState("");
useEffect(() => {
const handleExtensionMessage = (event) => {
if (event.source === window && event.data.fromExtension) {
const receivedMessage = event.data.message;
const receivedFormData = event.data.formData;
let name = receivedFormData.fullName.split(" ");
console.log(receivedMessage, receivedFormData);
setFirstName((prevFirstName) => name[0]);
setLastName((prevLastName) => name[1]);
usernameRef.current.value = receivedFormData.username;
aboutRef.current.value = receivedFormData.about;
setCountry(receivedFormData.country);
}
};
window.addEventListener("message", handleExtensionMessage);
return () => {
// Clean up the event listener
window.removeEventListener("message", handleExtensionMessage);
};
}, [
firstName,
lastName,
usernameRef,
aboutRef,
country,
setFirstName,
setLastName,
setCountry,
]);
// Form.jsx
function printFormData() {
const fullName = `${firstName} ${lastName}`;
console.log(
fullName,
usernameRef.current.value,
aboutRef.current.value,
country
);
let data = {
fullName: fullName,
username: usernameRef.current.value,
about: aboutRef.current.value,
country: country,
};
chrome.runtime.sendMessage(
"ehhaepoekddaiogbllbaanebolnekbpi",
{
type: "form-data",
data: data,
},
(response) => {
console.log(response);
}
);
}
return (
<div className="container">
<form>
<div className="space-y-12">
<div className="border-b border-gray-900/10 pb-12">
<div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div className="sm:col-span-4">
<label
htmlFor="username"
className="block text-sm font-medium leading-6 text-gray-900"
>
Username
</label>
<div className="mt-2">
<div className="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
<input
type="text"
ref={usernameRef}
name="username"
id="username"
autoComplete="username"
className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
placeholder="username"
/>
</div>
</div>
</div>
<div className="col-span-full">
<label
htmlFor="about"
className="block text-sm font-medium leading-6 text-gray-900"
>
About
</label>
<div className="mt-2">
<textarea
ref={aboutRef}
id="about"
name="about"
rows={3}
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
defaultValue={""}
/>
</div>
<p className="mt-3 text-sm leading-6 text-gray-600">
Write a few sentences about yourself.
</p>
</div>
</div>
</div>
<div className="border-b border-gray-900/10 pb-12">
<h2 className="text-base font-semibold leading-7 text-gray-900">
Personal Information
</h2>
<p className="mt-1 text-sm leading-6 text-gray-600">
Use a permanent address where you can receive mail.
</p>
<div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div className="sm:col-span-3">
<label
htmlFor="first-name"
className="block text-sm font-medium leading-6 text-gray-900"
>
First name
</label>
<div className="mt-2">
<input
onChange={(e) => setFirstName(e.target.value)}
type="text"
name="first-name"
id="first-name"
autoComplete="given-name"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div className="sm:col-span-3">
<label
htmlFor="last-name"
className="block text-sm font-medium leading-6 text-gray-900"
>
Last name
</label>
<div className="mt-2">
<input
type="text"
onChange={(e) => setLastName(e.target.value)}
name="last-name"
id="last-name"
autoComplete="family-name"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div className="sm:col-span-3">
<label
htmlFor="country"
className="block text-sm font-medium leading-6 text-gray-900"
>
Country
</label>
<div className="mt-2">
<select
onChange={(e) => setCountry(e.target.value)}
id="country"
name="country"
autoComplete="country-name"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6"
>
<option>United States</option>
<option>Canada</option>
<option>Mexico</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div className="mt-6 flex items-center justify-end gap-x-6">
<button
type="button"
className="text-sm font-semibold leading-6 text-gray-900"
>
Cancel
</button>
<button
type="button"
onClick={printFormData}
className="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Save
</button>
</div>
</form>
</div>
);
};
So I tried to enter the variables in dependencies array but did not work.
