Requirement

• react-hook-form >= 7.33.1
• @hookform/devtools >= 4.2.2

Usage

1. Install extension in Chrome Web Store
   Or build it yourself / download the release file (then goto Development Run third step)
2. Install devtools in your project

npm install @hookform/devtools -D

3. Add DevTool component in your code
   This won't show devtool component anymore! Just for extension detect your form
4. (Optional) Add custom form id: <DevTool id="YourFormId" control={control} />
   If you don't add it manually, it will be auto generated by uuid
5. Enjoy!

Development

Install

Note

Use pnpm only

pnpm install

Run

1. Run example webpage

2. Run extension in development mode

pnpm run dev

3. Open Chrome and navigate to chrome://extensions

4. Enable Developer mode

5. Click Load unpacked button and select /dist

Messaging Flow

sequenceDiagram
  participant Webpage
  participant Content Script
  participant Background
  participant Devtools
  participant Popup
  Background->>Background: Cleanup Cache
  Content Script->>Webpage: INIT
  Note left of Webpage: Browser has devtools extension
  Webpage->>Content Script: WELCOME
  Content Script->>Background: WELCOME
  Note right of Background: Webpage has rhf
  Background->>Background: Cache enabled tab
  par
    Popup->>Background: get-enable-status
    Background-->>Popup: Enable Status (Callback)
  and
    Devtools->>Background: get-enable-status
    Background-->>Devtools: Enable Status (Callback)
  end
  loop
    Webpage->>Content Script: UPDATE
    Content Script->>Background: UPDATE
    Note over Webpage,Background: Data
  end
  Background->>Background: Cache data
  loop Every 100ms
    Devtools->>Background: get-devtool-data
    Background-->>Devtools: Data (Callback)
  end
  Background->>Background: Cleanup Cache

Loading

Production

1. (Optional) Update package and manifest version

pnpm run update-version -- <version>

2. Build

pnpm run build

3. Production files can be found in /dist