web-extension-starter/source/ContentScript/page-enhancers/trade-finder-enhancer.ts

import TradeFinderRow from "../page-elements/trade-finder-row";
import TraderRepository from "../trader-repository";

export default class TradeFinderEnhancer {
    static addHeader(page: Document) {
        let th = document.createElement("th");
        th.innerText = "# of their wants that I own";
        th.style.textAlign = "center";
        th.scope = "col";

        page.querySelector("table thead tr")?.appendChild(th);
    }

    static async enhance(page: Document) {
        let repository = await TraderRepository.load();

        this.addHeader(page);

        let tbody = page.querySelector("table tbody")!;
        let rows = tbody.querySelectorAll("tr");

        Array.from(rows)
            .map((row) =>
                TradeFinderRow.parse(row as HTMLTableRowElement, repository)
            )
            .filter((row) => row !== null)
            .filter((row) => row!.trader !== null)
            .forEach((row) => row!.addWantsColumn());
    }
}