src/popup.tsx

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

function Popup() {
  const [count, setCount] = useState(0);
  const [currentURL, setCurrentURL] = useState<string>();

  useEffect(() => {
    chrome.action.setBadgeText({ text: count.toString() });
  }, [count]);

  useEffect(() => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      setCurrentURL(tabs[0].url);
    });
  }, []);

  const changeBackground = () => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      const tab = tabs[0];
      if (tab.id) {
        chrome.tabs.sendMessage(
          tab.id,
          {
            color: '#555555',
          },
          (msg) => {
            // console.log('result message:', msg);
          },
        );
      }
    });
  };

  return (
    <>
      <ul style={{ minWidth: '700px' }}>
        <li>
          Current URL:
          {currentURL}
        </li>
        <li>
          Current Time:
          {new Date().toLocaleTimeString()}
        </li>
      </ul>
      <button
        onClick={() => setCount(count + 1)}
        style={{ marginRight: '5px' }}
      >
        count up
      </button>
      <button onClick={changeBackground}>change background</button>
    </>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <Popup />
  </React.StrictMode>,
  document.getElementById('root'),
);