ポチる前に考えろ！Amazonの誘惑に打ち勝つための「買い控えアラート」を作成

Amazonで購入しすぎ！節約しろ、私！😣

こんにちは、ささみんです！👋😊

「気づいたらポチッとしてた……」「買うつもりなかったのに、ついカゴに入れてしまった……」なんて経験、無数にありませんか？

私は星の数ほどあります。むしろ、星の数より多いです🤣🌟✨

Amazonさえ無ければ、人類の大半は貯金が出来ていると思います🤭

年末の12月は雪山登山用の道具を大量買い、２月は無印良品で昔から欲しかった棚を購入したり、炊飯器を購入したりで大幅に予算オーバーです。

…私の貯める力はゼロよ…😭⤵

あまりにAmazonでの購入金額が大きいので、chatGPTと相談してChromeの機能拡張を作成してみました。

Amazonの「カートに追加」ボタンの上にカーソルが乗ると、

「それ本当に必要？このお金があれば何ができるか考えろ！」

とアラームが出ます。

無意識レベルでポチッている私自身に、何とか一瞬でも「本当に必要か？」と考えろと言いたい！😣

No buy Amazon　Chrome拡張

注意点！

Windows版のChromeで動作確認しています。Macでの動作は不明です💦

chatGPTと相談してコードを作っただけで、筆者はjavaの経験はありませんので質問されても答えられないです🙇‍♂️
動作不良があっても自己責任でお願いします🙇‍♂️

空フォルダを作成して、以下の２ファイルをテキストエディタにコピペして作成してください。ここでは例として「no-buy-amazon」フォルダとします。

ファイルの文字コードについて

テキストエディタで、「UTF-8、BOM無、改行コードLF」で保存してください。Windowsならサクラエディタなどが一般的だと思います。文字コードを指定出来ればなんでもいいです。

ファイル１

ファイル名：manifest.json

{
  "manifest_version": 3,
  "name": "Amazonカート警告",
  "version": "1.0",
  "description": "カートに追加するときに「それ本当に必要？」と警告する",
  "permissions": [],
  "host_permissions": ["*://www.amazon.co.jp/*", "*://www.amazon.com/*"],
  "content_scripts": [
    {
      "matches": ["*://www.amazon.co.jp/*", "*://www.amazon.com/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

ファイル２

ファイル名：content.js

console.log("拡張機能のスクリプトが読み込まれました！");

// 3秒間アラートを出さないようにするフラグ
let alertShownRecently = false;

// カートに追加ボタンを探す関数
function findAddToCartButton() {
  return document.getElementById("add-to-cart-button") ||
         document.querySelector("[name='submit.add-to-cart']") ||
         document.querySelector(".a-button-input");
}

// ボタンにイベントを設定する関数
function setButtonListener() {
  let button = findAddToCartButton();

  if (button) {
    console.log("カートに追加ボタンが見つかりました");
    
    button.addEventListener("mouseenter", function () {
      if (!alertShownRecently) {
        alert("それ本当に必要？このお金があれば何ができるか考えろ！");
        alertShownRecently = true;
        setTimeout(() => {
          alertShownRecently = false; // 3秒後にアラート許可
        }, 3000);
      }
    });
  } else {
    console.log("カートに追加ボタンが見つかりません");
  }
}

// `document_idle` で実行されるまで待つ
window.addEventListener("load", () => {
  setButtonListener();

  // ページの動的変更を監視
  const observer = new MutationObserver(() => {
    setButtonListener();
  });
  observer.observe(document.body, { childList: true, subtree: true });
});

この２つのファイルを「no-buy-amazon」フォルダに入れておきます。

このフォルダをChromeの機能拡張として登録します。設定方法は以下になります。

拡張機能の追加方法

１）Chromeの右上の縦三点メニューから「拡張機能」を開く

２）「デベロッパーモード」をONにする

３）「パッケージ化されていない拡張機能を読み込む」から、作成した「no-buy-amazon」フォルダを選択、「Amazonカート警告」という機能拡張が追加されればOKです。

以上で、Amazonの画面で「カートに追加」ボタンの上にカーソルが行くと警告文が出るかと思います。

これで少しはいらん買い物が減るといいね…😌

節約