Zenn
😽

Amazonの領収書を一括ダウンロードする拡張機能を作ったので解説

2024/07/05に公開
Chrome拡張
tech

デジタル商品とデジタル以外の商品の違い

Amazonの領収書はデジタル商品とデジタル以外の商品で異なっている。
デジタル商品とはKindle本とか、Kindle Unlimited の入会などが該当する。
デジタル以外の商品とは本や日曜品など、宅配で送られてくる商品が該当する。

商品番号の違い

これらを判別するのは簡単。デジタル商品は"D"から始まる。デジタル以外の商品は全部が数字だ。

だからJSではこのようにして判別している。

const isDigitalItem = orderNumber.charAt(0) == "D" ? true : false

デジタル商品か否かは領収書拡張機能を作る上で大事になるのでちゃんと情報を取っておくこと。

領収書URLの違い

コードでは次のように実装した。

let invoiceURL;
if (isDigitalItem) {
  //デジタル商品の場合
  invoiceURL = `https://www.amazon.co.jp/gp/digital/your-account/order-summary.html/ref=oh_aui_ajax_dpi?ie=UTF8&orderID=${orderNumber}&print=1`
} else {
  //デジタル以外の商品の場合
  invoiceURL = `https://www.amazon.co.jp/gp/css/summary/print.html/ref=oh_aui_ajax_invoice?ie=UTF8&orderID=${orderNumber}`
}

なぜか領収書のURLが異なっている。どちらもベースのURLがあり、URLパラメーターに注文番号を入力すれば出てくる。

CSSが違う

これが難題。CSSの違いを取り扱うのは自分にはできなかった。まずは先行拡張機能を見てほしい。

先行の拡張機能ではデジタル商品とデジタル以外の商品で領収書のダウンロードページを変えていた。初めは不思議だったが作っていくと理由がわかった。適用されるCSSが違うのだ。
まずはデジタル商品に適用されるCSSを確認してみる。要素に適用されているCSSを調べる方法は次のようにすればいい。 DevToolsを開き、Elementsタブを開き、Inspectionをクリックし、適当に要素を選択してみる。すると画面の右にその要素に紐づいているCSSやイベントの情報が出てくる。下の画像を見てほしい。この画像ではtableタグについて紐づいているCSSの情報を表示させている。赤で囲んでいるところを見てほしい。11KpeNaLkYL...AmazonUI

領収書のページはとても雑に作られている。タグにクラスやIDをつけてCSSで管理しているわけではない。だからデジタルとデジタル以外のCSSが重複してしまうことを恐れた。なのでページを読み込んでだあとlinkを削除した。その後、digital-receipt.cssとnon-digital-receipt.cssの2つのCSSを用意し、挿入した。

  const styles = document.querySelectorAll('style')
  styles.forEach((style) => {
    style.remove()
  })
  const nonDigitalCSS = document.createElement("link");
  nonDigitalCSS.rel = "stylesheet";
  nonDigitalCSS.type = "text/css"
  nonDigitalCSS.href = 'non-digital-receipt.css'
  document.getElementsByTagName("head")[0].appendChild(nonDigitalCSS);

  const digitalCSS = document.createElement("link");
  digitalCSS.rel = "stylesheet";
  digitalCSS.type = "text/css";
  digitalCSS.href = 'digital-receipt.css';
  document.getElementsByTagName('head')[0].appendChild(digitalCSS);

でもダメだった。デジタル商品だけがレイアウトを保たれて、デジタル以外の商品のCSSは適用されなかった。

参考サイト

基本的にこのコードの焼き直し。jQueryは詳しくないのでChatGPTを使い、PureはJSに書き直して解読した。
https://gist.github.com/l-rutong/7479ff894fdf61186200a2bd52511ee0

アマゾン注文履歴の拡張機能を作った人のブログ。この拡張機能が一番デキがよく、実際どんな風に動作するのか動かしてみた。
https://memo.furyutei.com/entry/amzOrderHistoryFilter

Discussion