Automate Chrome Web Store listing translations with a console script

const ANIMATION_TIMEOUT = 500;

const fileInput = document.createElement("input");
fileInput.setAttribute("id", "filepicker");
fileInput.setAttribute("type", "file");
fileInput.setAttribute("webkitdirectory", "");
fileInput.setAttribute("multiple", "");
fileInput.setAttribute(
  "style",
  "position: absolute;top: 0;z-index: 999;padding: 1rem;background: green;",
);
document.documentElement.append(fileInput);

document.getElementById("filepicker").addEventListener(
  "change",
  async event => {
    const files = event.target.files;

    const locales = {};

    const localeFiles = Object.values(files)
      .filter(f => f.name == "messages.json")
      .filter(f => f.type == "application/json");

    for (const localeFile of localeFiles) {
      const localeCode = localeFile.webkitRelativePath
        .replace("_locales/", "")
        .replace("/messages.json", "");
      const fileText = await localeFile.text();

      const localeJson = JSON.parse(fileText);
      if (localeJson.storeDesc) {
        locales[localeCode] = localeJson.storeDesc.message;
      } else {
        console.warn(`[${localeCode}] - no storeDesc key, skipping`);
      }
    }

    console.log(`Found ${Object.keys(locales).length} locales with storeDesc`);
    console.log("Locales:", locales);

    await uploadLocales(locales);
  },
  false,
);

function sleep(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}

async function uploadLocales(locales) {
  const dropdown = document.evaluate(
    "//h3[text()='Current editing language']/../../div[2]//div[@jsshadow]/div/div",
    document,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null,
  ).singleNodeValue;

  if (!dropdown) {
    console.error("Could not find the language dropdown. Make sure you are on the Store Listing tab.");
    return;
  }

  let filled = 0;
  let skipped = 0;

  for (const [rawCode, description] of Object.entries(locales)) {
    let code = rawCode.replace("_", "-");

    if (code === "he") {
      code = "iw";
    }

    dropdown.click();
    await sleep(ANIMATION_TIMEOUT);

    const langList = document.evaluate(
      "//ul[@aria-label='Language']",
      document,
      null,
      XPathResult.FIRST_ORDERED_NODE_TYPE,
      null,
    ).singleNodeValue;

    if (!langList) {
      console.error("Could not find the language list. Try refreshing the page.");
      return;
    }

    const langItem = [...langList.children]
      .filter(e => e.tagName == "LI")
      .find(e => e.getAttribute("data-value") == code);

    if (!langItem) {
      console.warn(`[${code}] not found in CWS language dropdown, skipping`);
      skipped++;
      document.body.click();
      await sleep(ANIMATION_TIMEOUT);
      continue;
    }

    langItem.click();
    await sleep(ANIMATION_TIMEOUT);

    const textarea = document.evaluate(
      "//textarea[@maxlength='16000']",
      document,
      null,
      XPathResult.FIRST_ORDERED_NODE_TYPE,
      null,
    ).singleNodeValue;

    if (!textarea) {
      console.error(`[${code}] could not find description textarea`);
      skipped++;
      continue;
    }

    textarea.dispatchEvent(new Event("focus"));
    textarea.value = description;
    textarea.dispatchEvent(new Event("input", { bubbles: true }));
    filled++;

    console.log(`[${code}] ✓ description filled`);
    await sleep(ANIMATION_TIMEOUT);
  }

  console.log(
    `Done! Filled ${filled} locale(s), skipped ${skipped}.` +
    ` Click "Save draft" to save your changes.`,
  );
}