diff --git a/src/content.ts b/src/content.ts index 93c2bb2..19fcf05 100644 --- a/src/content.ts +++ b/src/content.ts @@ -4,7 +4,37 @@ import { postWebpageMessage, } from './services/webpage'; +const PROBE_INTERVAL_MS = 1000; + postWebpageMessage('INIT'); addWebpageMessageListener((message) => { postExtensionMessage(message); }); + +// A form can mount long after this script runs — inside a dialog, or on a client-side route — +// and the page only announces itself in reply to an INIT. Probing just once therefore misses +// every form that did not already exist, so keep asking while the tab is in the foreground. +// https://github.com/react-hook-form/devtools-extension/issues/15 +let probeInterval: number | undefined; + +const startProbing = () => { + if (probeInterval === undefined) { + probeInterval = window.setInterval( + () => postWebpageMessage('INIT'), + PROBE_INTERVAL_MS, + ); + } +}; + +const stopProbing = () => { + window.clearInterval(probeInterval); + probeInterval = undefined; +}; + +document.addEventListener('visibilitychange', () => + document.hidden ? stopProbing() : startProbing(), +); + +if (!document.hidden) { + startProbing(); +}