document.getElementById("grabbutton").addEventListener("click", function () {
    browser.tabs.query({ active: true, currentWindow: true }).then(tabs => {
        browser.tabs
            .sendMessage(tabs[0].id, { action: "get" })
            .then((response) => {
                tablebody = document.getElementById("tablebody");
                tablebody.innerHTML = "";

                console.log(response);

                keys = Object.keys(response);
                keys.forEach(key => {
                    tr = document.createElement("tr");

                    td1 = document.createElement("td");
                    td1.textContent = key;
                    tr.appendChild(td1);

                    td2 = document.createElement("td");
                    td2.textContent = response[key].qty;
                    tr.appendChild(td2);

                    td3 = document.createElement("td");
                    td3.textContent = response[key].cost;
                    tr.appendChild(td3);

                    td4 = document.createElement("td");
                    td4.textContent = "$" + (parseFloat(response[key].qty * response[key].cost.substring(1)).toFixed(2));
                    tr.appendChild(td4);

                    tablebody.appendChild(tr);
                    console.log(tr);

                });
                browser.storage.local.set(responsedata);
            });
    });
})
    .catch(error => {
        console.log(error);
    });

document.getElementById("inputbutton").addEventListener("click", function () {
    browser.tabs.query({ active: true, currentWindow: true }).then(tabs => {
        browser.tabs
            .sendMessage(tabs[0].id, { action: "send", content: document.getElementById("tablebody") })
            .then(response => {
                console.log(response);
            });
    })
        .catch(error => {
            console.log(error);
        });
});