useSimpleChromeExtensionHook.ts

import { useEffect } from "react";

export const useSimpleChromeExtensionHook = () => {
  useEffect(() => {
    // 1. Get the current active tab
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      console.log(">>>>>>>> chrome.tabs.query <<<<<<<<<< ", tabs);
      const activeTabId = tabs[0].id as number;

      // 2. Execute a script in that active tab
      chrome.scripting.executeScript(
        {
          target: { tabId: activeTabId },
          func: getPageResources,
        },
        (results) => {
          console.log(
            ">>>>> chrome.scripting.executeScript <<<<<<<<< ",
            results,
          );
        },
      );
    });
  }, []);

  /**
   * This function is NOT run in React; it is stringified and sent to the page.
   * It cannot access variables outside of its own scope.
   */
  function getPageResources() {
    // This will be logged in the chrome, not in a separate console
    console.log(">>>>>>> getPageResources <<<<<<<<<<<");

    // 1. Get the entries
    const entries = performance.getEntriesByType("resource");

    // 2. Map and cast 'entry' to 'PerformanceResourceTiming'
    return entries.map((entry) => {
      console.log(">>>>>>>> ENTRY", entry);
      const resource = entry as PerformanceResourceTiming; // <--- THE FIX

      return {
        name: resource.name,
        type: resource.initiatorType,
        size: resource.transferSize,
      };
    });
  }
};