Estoy creando tanto la aplicación web como la extensión reaccionar de Chrome. Quiero que la extensión muestre el estado actual de autenticación de la aplicación web (almacenado en cookies). El siguiente código a continuación funciona (la secuencia de comandos de fondo escucha los cambios de las cookies y almacena el valor actual en el almacenamiento, y la secuencia de comandos emergente extrae cada 1 segundo el valor actual del almacenamiento), pero me pregunto si esta extracción es la forma correcta de hacerlo. Intenté usar chrome.storage.onChanged en el script emergente, pero solo se activó una vez.
fondo.js
const domainName = 'localhost' // address of my web app const cookieName = 'user' chrome.cookies.onChanged.addListener(({ cookie, removed: isBeingRemoved }) => { if (cookie.domain === domainName && cookie.name === cookieName) { chrome.storage.sync.set({ [cookieName]: !isBeingRemoved ? cookie.value : null, }) } })ventana emergente.jsx
const [user, setUser] = useState(null) const pullVariablesFromStorage = () => { chrome.storage.sync.get(['user'], function ({ user }) { setUser(user) }) } useEffect(() => { pullVariablesFromStorage() const intervalId = setInterval(() => { pullVariablesFromStorage() }, 1000) return () => clearInterval(intervalId) }, []) return ( <div>{user ? `Hi ${user}` : 'sign in using web app'}</div> )Resolví el problema usando mensajes (también me olvidé de obtener cookies al abrir la ventana emergente), este es el resultado:
const domainName = 'localhost' // address of my web app const cookieName = 'user' chrome.cookies.onChanged.addListener(({ cookie, removed: isBeingRemoved }) => { if (cookie.domain === domainName && cookie.name === cookieName) { chrome.runtime.sendMessage({ type: 'cookie_change', key: cookieName, value: !isBeingRemoved ? cookie.value : null, }) } }) const [user, setUser] = useState(null) useEffect(() => { // get cookies when opening popup chrome.cookies.getAll({ domain: 'localhost' }).then((cookies) => { cookies.forEach(({ name, value }) => { if (name === 'user') { setUser(value) } }) }) // while popup is opened wait for messages chrome.runtime.onMessage.addListener((message) => { if (message.type === 'cookie_change' && message.key === 'user') { setUser(message.value) } }) }, []) return <div>{user ? `Hi ${user}` : 'sign in using web app'}</div>