Ship your browser extension in days.

// extension/popup/popup.tsx
import { render } from "preact";
import { useEffect, useState } from "preact/hooks";
import { s } from "./popup-styles";

function Popup() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    chrome.runtime.sendMessage(
      { type: "factory/getCount" },
      (res) => res && setCount(res.count),
    );
  }, []);

  return (
    <div style={s.shell}>
      <header style={s.header}>
        <span style={s.brandMark}>SF</span>
        <span>Soft-factory</span>
      </header>
      <div style={s.card}>
        <div style={s.statLabel}>Today's actions</div>
        <div style={s.statValue}>{count}</div>
        <button
          style={s.primaryBtn}
          onClick={() => {
            chrome.runtime.sendMessage({
              type: "factory/track",
              event: "extension_primary_action",
            });
            setCount((c) => c + 1);
          }}
        >
          Run highlight on this page
        </button>
      </div>
    </div>
  );
}

render(<Popup />, document.getElementById("root")!);