MENU

JavaScriptchrome拡張機能

PS5の入荷監視をChromeで行う拡張機能を作成してみる

更新日:2021/03/12

 

数日運用してみましたが効果がなかったため、配布をとりやめました。
この記事は、本気でPS5を入手したい人には、あまり意味がない記事となります。
Chrome拡張機能の例としてご覧ください。

 

PlayStation5の販売が開始してから数か月が経過しました。
しかし未だに店頭販売が行われずに、入手したくても出来ないという人が続出しています。

 

僕もその中の一人だったりします。

 

そこで今回は、抽選以外で入手できる楽天ブックスとAmazonで注文できるように、入荷を監視しするchromeの拡張機能プログラムを作成してみます。
※Firefoxでも動作します。

 

 

コードを3/16に一部修正しています。

■お願い
去年ECMAScript2020を頑張って日本語訳しましたが、誰も見てくれません・・・
誰かみて!!
【JavaScript】 学習のためECMAScript2020を日本語訳してみました

対象のページ

 

まずは各サイトの販売ページを調べてみました。

 

Amazon:
PlayStation 5 (CFI-1000A01)
https://www.amazon.co.jp/dp/B08GGGBKRQ/

 

PlayStation 5 デジタル・エディション
https://www.amazon.co.jp/dp/B08GGF7M7B/

 

楽天ブックス:
PlayStation5
https://books.rakuten.co.jp/rb/16462859/

 

PlayStation5 デジタル・エディション
https://books.rakuten.co.jp/rb/16462860/

 

今回は次のページを表示した状態で放置し、入荷が確認できたら通知を受け取るようにしてみます。

 

なお細かい理屈はどうでもいい人は、条件付き配布へどうぞ。

chrome拡張機能の作成

 

今回作成する拡張機能は、ps5-stock-monitoringフォルダ内に3つのファイルを作成します。

 

ps5-stock-monitoring
   ┃
   ┣ manifest.json
   ┃
   ┣ content.js
   ┃
   ┗ background.js

 

manifest.json

 

manifest.jsonは、chrome拡張機能の構成を設定するファイルです。

 

今回は、次のように記述しています。

 


{
  "name": "ps5 Stock Monitoring",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "PS5の在庫状況を監視する",
  "content_scripts": [{
    "matches": [
            "https://www.amazon.co.jp/dp/B08GGGBKRQ/*",
            "https://www.amazon.co.jp/dp/B08GGF7M7B/*",
            "https://books.rakuten.co.jp/rb/16462859/*",
            "https://books.rakuten.co.jp/rb/16462860/*",
      ],
    "run_at": "document_start",
    "js": [
      "content.js"
    ]
  }],
  "permissions": [
    "tabs"
  ],
  "background":{
    "scripts":[
      "background.js"
    ],
    "persistent": true
  }
}

 

"content_scripts"は、表示しているwebページに組み込まれるファイルを定義します。
この中の"matches"で、対象となるURLを指定します。
今回は4つのページが対象なので、それぞれここに全て記述しています。
"js"で指定したファイルが、JavaScriptとして使用されます。

 

"permissions"は、ユーザーに許可を求める機能を指定します。
今回はサイトを再表示するためにタブ機能にアクセスすつ必要があるため、"tabs"を指定しています。

 

"background"は、バックグランドで動作するスクリプトファイルを定義します。
バックグランドは2種類あり、"persistent"trueのときバックグランドページ、falseのときイベントページとして動作します。
公式ドキュメントによると、可能ならイベントページを使用するべきだそうです。
しかし今回は定期的にwebページを再表示します。
タイマー処理はsetTimeoutを使用しまが、これはイベントページで動作しないようです。
chrome.alarmsを使用するとイベントページでタイマー処理ができますが、単位が分のため、使いにくいです。
そのため今回は、バックグランドページを選択しています。

 

content.js

 

content.jsは、webページ内に取り込まれるJavaScriptファイルです。
scriptタグで指定したJavaScriptと同じことができます。

 

ここではDOMを参照して在庫があるかどうかのチェックと、在庫通知、バックグランドページへの再表示依頼をおこなっています。

 


(()=>{

                // urlがamazonかどうかチェック
    const isAmazon = location.href.indexOf("amazon.co.jp") >= 0;

                // amazonのときの『在庫あり』確認
    const checkAmazon = () =>{
        const itemname = document.getElementById("productTitle").textContent;
        return document.getElementById("availability")
                    .textContent.indexOf("在庫あり") >= 0 ?
                                 "[Amazon]" +itemname : false;
    };

                // 楽天のときの『在庫あり』確認
    const checkRakuten = () =>{
        const itemname = document.querySelector("#productTitle h1").textContent;
        return document.querySelector("#purchaseBox .status")
            .textContent.indexOf("在庫あり") >= 0 ? "[楽天]" +itemname : false;
    };

                // 在庫確認
    const ps5Check = ( notifyFlg )=>{

        const itemname = isAmazon ? checkAmazon() : checkRakuten();

        if( itemname !== false ) { // 在庫があったら、通知して終了
            const message = itemname + "の在庫があります";
            notifyFlg ? new Notification(message) : alert(message);
            return;
        }
                // 在庫なし 

        const randomTime = Math.floor( Math.random() * 5000 );

               // webページ再表示要求をバックグランドページに送る
               // バックグランドページで待機→このページで待機に辺区
                //   変更前
               // chrome.runtime.sendMessage({ action:"reload",time: 20000 + randomTime});

        setTimeout( ()=>chrome.runtime.sendMessage({ action:"reload",time: 10000 + randomTime},(res)=>{})
            ,10000+ randomTime);

    };

        //  全て読み込み後実行→DOM構築後実行に変更
        //
        //  変更前   
        // window.addEventListener("load",
        //     ()=> Notification.permission === "granted"  ? ps5Check( true )
        //     : Notification.requestPermission()
        //     .then(()=>ps5Check(true),()=>ps5Check(false)));

    const loadFunc = ()=> Notification.permission === "granted"  ? ps5Check( true )
        : Notification.requestPermission()
            .then(()=>ps5Check(true),()=>ps5Check(false));

    if( document.readyState === "loading" )
        window.addEventListener( "DOMContentLoaded" , ()=> loadFunc());
    else loadFunc();

})();

 

基本的にDOM操作をやっているだけです。

 

在庫なし時のrandomTime変数は、一定間隔の再表示要求でBOT的な疑いを各サイトにもたれないための処理です。
各サイトが実際にチェックしているかわかりませんが、心配性なので設置してあります。

 

Notification.permissionは、ブラウザがユーザーに通知可能かどうかが確認できます。
通知可能でない場合、Notification.requestPermission()でユーザーに許可を求めています。
許可されなかった場合、入荷通知をalertでおこないます。

 

3/16に一部修正しています。

 

許可をしなかった場合、再表示のたびに許可を求められる可能性があります。
今回は、許可をすることを前提としてプログラムを作成しています。

 

background.js

 

background.jsは、webページからメッセージを受け取り、一定時間待ってからwebページを再表示しています。

 


chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

     if(request.action==="reload")
         setTimeout( ()=>chrome.tabs.reload(sender.tab.id,{bypassCache:true}),request.time );
});

 

reloadの2番目の引数メンバーbypassCacheは、trueのときローカルキャッシュをバイパスしてくれます。
つまり、常に新しいページデータをくださいと、相手のサーバーに要求します。
ページを再表示しても新しいデータを取得できなかったら、意味がないですからね。
ただ、販売ページなので、元からキャッシュをしてないと思います。

テスト

 

作成した拡張機能を、自作chrome拡張機能をテストする方法で紹介した方法でテストします。

 

とはいえ、今回の拡張機能の目的は入荷の監視です。
当然のことですが、入荷した状況を疑似的に再現する必要があります。

 

はっきりいって、手間がかかりすぎて無理です。

 

仕方がないので、定期的に再起動することを確認しました。

 

また、manifest.jsonの"matches"に在庫があるページを追加して、通知が表示されることを確認しました。

 

 

chrome 拡張機能 通知

 

たぶん、大丈夫。

 

条件付き配布

 

2020/3/18
配布をとりやめました

 

今回作成した拡張機能を「とりあえずください」、という問い合わせがあったので条件付きで配布します。

 

ダウンロード条件

 

  1. ページの再表示回数が多くてAmazonや楽天から怒られるかもしれない。→ログインしないで実行するのがおすすめ
  2. 拡張機能とサイトの機能が衝突して在庫があっても買えないかもしれない。→他のブラウザやスマホで購入する
  3. 動かなくても怒らない。動かなかったために買えなくても怒らない
  4. ブラウザが壊れても怒らない←壊れないと思うけれど…
  5. PS5が買えたらすぐにブラウザから削除する
  6. この拡張機能によって生じた損害について、当方は一切の責任を負いません

 

全て(心の中で)承諾した上で、ダウンロードしてください。

 

ダウンロード

 

 

ダウンロード後は解凍してから、次の記事の方法でchromeに登録してください。
自作Chrome拡張機能のインストール方法
自作Firefox拡張機能のインストール方法

 

※Firefoxは、ブラウザを終了すると自作拡張機能を削除してしまうため、毎回設定が必要です。Chromeでの使用をおすすめします。
(■Google Chrome をダウンロードしてインストールする

 

 

インストール後、対象のページにあるリンクから販売ページを開くことで入荷監視が始まります。
中止するにはページを閉じてください。

効果なしの理由

 

この拡張期のを数日間運用してみました。
その結果をお伝えします。

 

なお運用中は、入荷されているか確認するためにツイッターの入荷速報を参照しています。

 

楽天ブックス

 

楽天ブックスはブラウザで再表示を繰り返すと、サーバーからの応答が遅くなるようです。
そのため入荷速報よりも本ツールの検知が遅くなり、入手困難な状況からのスタートとなります。

 

つまり本ツールを使用するよりも、ツイッターの入荷速報を見た方がよいという判断です。

 

Amazon

 

Amazonは在庫反映のタイミングが一定ではありません。
ツイッターの入荷速報後、ツールを実行しているブラウザでは在庫が反映されませんでした。
反映されたのは、それから一分程度後でした。
また手持ちのスマホで確認したところ、こちらは在庫なしとなっていました。

 

つまりAmazonも、本ツールを使用するよりもツイッターの入荷速報を見た方がよいという判断です。

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://note.affi-sapo-sv.com/info.php

【お願い】

お願い

■このページのURL


■このページのタイトル


■リンクタグ