18 |
19 | This page {enable ? 'is' : "is't"} using the debug mode of React Hook
20 | Form. {enable ? '✅' : '❌'}
21 |
22 | {enable ? (
23 |
24 | Open the developer tools, and "React Hook Form" tab will appear to the
25 | right.
26 |
27 | ) : (
28 |
29 | If your page have React Hook Form. Please press Ctrl +{' '}
30 | Shift + R to reload the page.
31 |
32 | )}
33 |
34 |
35 | Need help? Create an issue or discussion{' '}
36 |
40 | here
41 |
42 | !
43 |
44 |
45 | );
46 | };
47 |
48 | export default Popup;
49 |
--------------------------------------------------------------------------------
/src/services/extension.ts:
--------------------------------------------------------------------------------
1 | import type { ExtensionMessageResponse } from '../typings/extension-message';
2 | import type { MessageData } from '../typings/webpage-message';
3 |
4 | export const postExtensionMessage = (message: MessageData) =>
5 | chrome.runtime
6 | .connect({
7 | name: 'react-hook-form',
8 | })
9 | .postMessage(message);
10 |
11 | export const addExtensionMessageListener = (
12 | fn: (message: MessageData) => void,
13 | ) =>
14 | chrome.runtime.onConnect.addListener((port) => {
15 | if (port.name !== 'react-hook-form') return;
16 | port.onMessage.addListener((message) => {
17 | fn(message);
18 | });
19 | });
20 |
21 | export const sendExtensionOneTimeMessage = <
22 | TMessageType extends keyof ExtensionMessageResponse,
23 | >(
24 | tabId: number,
25 | type: TMessageType,
26 | responseCallback?: (response: ExtensionMessageResponse[TMessageType]) => void,
27 | ) => {
28 | chrome.runtime.sendMessage({ type, tabId }, (response) => {
29 | if (responseCallback) {
30 | responseCallback(response);
31 | }
32 | });
33 | };
34 |
35 | export const addExtensionOneTimeMessageListener = (
36 | fn: (
37 | request: { type: keyof ExtensionMessageResponse; tabId: number },
38 | _: unknown,
39 | sendResponse: (
40 | response: ExtensionMessageResponse[keyof ExtensionMessageResponse],
41 | ) => void,
42 | ) => void,
43 | ) => {
44 | chrome.runtime.onMessage.addListener(fn);
45 | };
46 |
--------------------------------------------------------------------------------
/src/services/webpage.ts:
--------------------------------------------------------------------------------
1 | import type { MessageData } from '../typings/webpage-message';
2 |
3 | const MESSAGE_SOURCE = 'react-hook-form-bridge';
4 |
5 | export function postWebpageMessage(type: MessageData['type']) {
6 | window.postMessage({ source: MESSAGE_SOURCE, type } as MessageData);
7 | }
8 |
9 | export function addWebpageMessageListener(fn: (message: MessageData) => void) {
10 | window.addEventListener('message', ({ data }: MessageEvent