如何在瀏覽器上下文中使用擴展上下文變量？

Question

我正在嘗試將startDate和endDate傳遞給我的 chrome 擴展腳本，但由於某種原因它不起作用。 我查看了 chrome 擴展文檔，但除了在chrome.scripting.executeScript中使用 args 屬性外，我找不到任何解決方案。 盡管如此，它序列化了 arguments 所以我不能實際使用它們。

const startDate = document.getElementById("start-date")?.value;
const endDate = document.getElementById("end-date");
const searchButton = document.getElementById("search-button");

searchButton.addEventListener("click", async (startDate, endDate) => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    args: [startDate],
    function: scrapCalendar,
  });
});

function scrapCalendar(startDate) {
  let pageDateRange = document
    .querySelector(
      "#sectionBody > div.con_cuer > div.tabla1 > div:nth-child(2) > div.tabder"
    )
    ?.innerText.split(" ");
  /*
  let goLastPageButton = document.querySelector(
    "#sectionBody > div.con_cuer > div.flechas_horario > div.izq"
  );
  let goNextPageButton = document.querySelector(
    "#sectionBody > div.con_cuer > div.flechas_horario > div.der"
  );*/
  let pageStartDate = pageDateRange[1];
  let pageEndDate = pageDateRange[3];
  console.log(startDate);
  console.log(pageStartDate + " - " + pageEndDate);
}

Answer 1

通過從addEventListener function 而不是全局 scope 中提取日期來修復它。我以為我在async (startDate, endDate)中將值傳遞給 addEventListener function 但它們只是 function 參數名稱。

解決方案：

const searchButton = document.getElementById("search-button");

searchButton.addEventListener("click", async () => {
  const startDate = document.querySelector("#start-date")?.value;
  const endDate = document.querySelector("#end-date")?.value;
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    args: [startDate, endDate],
    func: scrapCalendar,
  });
});

function scrapCalendar(startDate, endDate) {
  let pageDateRange = document
    .querySelector(
      "#sectionBody > div.con_cuer > div.tabla1 > div:nth-child(2) > div.tabder"
    )
    ?.innerText.split(" ");
  /*
  let goLastPageButton = document.querySelector(
    "#sectionBody > div.con_cuer > div.flechas_horario > div.izq"
  );
  let goNextPageButton = document.querySelector(
    "#sectionBody > div.con_cuer > div.flechas_horario > div.der"
  );*/
  let pageStartDate = pageDateRange[1];
  let pageEndDate = pageDateRange[3];
  console.log(startDate + " * " + endDate);
  console.log(pageStartDate + " - " + pageEndDate);
}