Add React components interaction with content script example on the docs about chrome-extension-tools HOT 12 OPEN

// popup
const [tab] = await chrome.tabs.query({active: true,currentWindow: true});
if (tab.id === undefined) return;
await chrome.tabs.sendMessage(tab.id, { type: 'do_something' });

// content_script
function listener(msgObj, _, _) {
      if (msgObj.type === 'do_something') {
        //TODO: do something
      }
    }
chrome.runtime.onMessage.addListener(listener);

// popup/useLicenseStatus.tsx
export const useLicenseStatus = (setLicense: (license: LicenseState) => void) => {
  useEffect(() => {
    const fetchData = async () => {
      const [tab] = await chrome.tabs.query({
        active: true,
        currentWindow: true,
      });
      if (tab.id === undefined) return;
      const response: LicenseState = await chrome.tabs.sendMessage(tab.id, { type:  'get_license_status'});
      console.log('response', response);
      if (response !== undefined) {
        setLicense(response);
      }
    };

    void fetchData();
  });
};

// contentscript.tsx
export function useShareLicenseStatus(licenseState: LicenseState) {
  const listener = useCallback(
    (msgObj, _, respond: (_: LicenseState) => void) => {
      if (msgObj.type === 'get_license_status') {
        respond(licenseState);
      }
    },
    [licenseState]
  );
  useEffect(() => {
    chrome.runtime.onMessage.addListener(listener);
    return () => chrome.runtime.onMessage.removeListener(listener);
  }, [listener]);
}