I’m trying to click a button in a website and extract data from the next page after the content is loaded.

I tried using onDOMContentLoaded as well as trying to put a listener in the tab but it doesn’t work. The code is able to click the button in the page but anything after won’t run.

I’ve tried multiple things with no success, this is my current code:

export const nextAvailableDate: (tab: chrome.tabs.Tab) => void = async (tab) => {

  await new Promise((resolve: any) => { 
    chrome.tabs.onUpdated.addListener(function listener(tabId, info) {
      if (tabId === tab.id && info.status === 'complete') {
        chrome.tabs.onUpdated.removeListener(listener);
        resolve();
      };
    })
  });

  const auctionDates = document.querySelectorAll('div.CALSELF, div.CALSELT') as NodeListOf<HTMLElement>;

  const nextAuctionDates: HTMLElement[] = [];
  
  auctionDates.forEach(auctionDate => {
    const availableAuctions = auctionDate?.querySelector('span.CALACT') as HTMLElement;

    if (parseInt(availableAuctions.innerText) > 0) {
      nextAuctionDates.push(
        auctionDate as HTMLElement
      );
    };

  });

  if (nextAuctionDates[0]) nextAuctionDates[0].click();

  return !!nextAuctionDates[0];
};

import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

import { nextAvailableDate } from './utils';

function App() {
  const onClick = async () => {
    var tab = await chrome.tabs.create({
      url: "https://hillsborough.realforeclose.com/index.cfm?zaction=USER&zmethod=CALENDAR"
    });

    // chrome.webNavigation.onDOMContentLoaded.addListener(async (details) => {
    //   await chrome.scripting.executeScript({
    //     target: {
    //       tabId: details.tabId!
    //     },
    //     func: () => {
    //       alert('Puta');
    //     }
    //   })
    // }, {
    //   url: [
    //     {
    //       hostContains: 'https://hillsborough.realforeclose.com/index.cfm?zaction=AUCTION&Zmethod=PREVIEW&AUCTIONDATE='
    //     }
    //   ]
    // });

    let [ { result } ] = await chrome.scripting.executeScript<any[], void>({
      target: {
        tabId: tab.id!
      },
      args: [
        tab
      ],
      func: nextAvailableDate
    });

    alert(result);


  };

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => onClick()}>
          count is {0}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App