Greasemonkey User Script: Shows total price of incoming auto delivery on Amazon.co.jp

show-total-price-of-amazon-jp-auto-delivery.user.js

// ==UserScript==
// @name     Show total price of incoming auto delivery on Amazon.co.jp
// @version  1
// @grant    none
// @match    https://www.amazon.co.jp/auto-deliveries*
// @exclude  /^https:\/\/www\.amazon\.co\.jp\/auto-deliveries\/[^?]/
// ==/UserScript==

/**
 * Each .subscription-price-container element has price of corresponding item in JPY and (optinally) purchasing quantity.
 * This function extracts them and returns multiplication of them as total price of the item.
 */
function extractTotalPriceOfItem(el, deliveryType) {
  const price = readNumber(el.querySelector('.subscription-price')?.textContent ?? '0');
  // It seems for each item to show total price when the delivery is preparing / ongoing.
  const quantity = deliveryType === 'inprogress' ? 1 : readNumber(el.querySelector('.subscription-quantity-message')?.textContent ?? '1');
  return price * quantity;
}

/**
 * Formats number as comma (or dot) separated decimal with leading Yen sign.
 */
function formatAsJPY(price) {
  const yenSign = String.fromCodePoint(0x00A5);
  return yenSign + price.toLocaleString();
}

/**
 * Parses string as decimal number with ignoring non-decimal characters within it.
 */
function readNumber(s) {
  return s.replaceAll(/\D/g, '') - 0;
}

const deliveryCards = document.querySelectorAll('.delivery-card');
deliveryCards.forEach(deliveryCard => {
  const { deliveryType } = deliveryCard.dataset;
  const prices = Array.from(deliveryCard.querySelectorAll('.subscription-price-container'))
    .map(el => extractTotalPriceOfItem(el, deliveryType));
  const hasPriceUndeterminedItem = prices.includes(0);
  const totalPrice = prices.reduce((l, r) => l + r, 0);

  // Some cosmetics to be looking native.
  const resultContainer = document.createElement('div');
  resultContainer.className = 'a-section a-spacing-none';
  const label = document.createElement('span');
  label.className = 'a-size-small';
  label.textContent = 'Total Price: ';
  const price = document.createElement('span');
  price.className = 'a-size-small a-color-price';
  price.textContent = formatAsJPY(totalPrice);
  resultContainer.append(label, price);
  if (hasPriceUndeterminedItem) {
    const note = document.createElement('span');
    note.className = 'a-size-small';
    note.textContent = ', excluding price-TBD item(s.)';
    resultContainer.append(note);
  }

  deliveryCard.querySelector('.delivery-information-container').append(resultContainer);
});