はじめに
はじめましてほしいもです。
今回はGoogle Chrome の開発者コンソールでJavaScriptを実行する方法について書いてみました。
何がしたかったか
昨日、フォトスタジオで七五三の写真を撮ってもらってきました！
画像データをいただけるんですが、カット数に応じて値段が違うんですよね。
基本料金だと50枚なんですが、良い写真が多くて120枚にしちゃいました。（料金も倍以上になりました...）
今日待ちに待った写真のダウンロードがPhotoRecoというサイトでできるようになったんですが、一括ダウンロードボタンがない...。
120回ダウンロードボタンを押すのは辛いので、JavaScriptで連打してみました。
ダウンロードボタンは↓のように写真ごと配置されています。
開発者コンソールでJavaScriptを実行する
①開発者コンソールを起動
Google Chromeを開いてF12を押下します。
↓こんな画面が出てきます。
②JavaScriptを実行
コンソールタブで以下のコードを貼り付けます。
※PhotoReco以外のサイトで使う場合は適当にセレクター変えてね。
const clickAllSpansWithClassWithDelay = async () => {
// 'btnDL_1 boxer' クラスを持つすべての span タグを取得
const spans = document.querySelectorAll('span.btnDL_1.boxer');
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
for (const span of spans) {
span.click(); // クリックイベントを発火
await delay(1000); // 次のクリックまで1秒待機
}
};
clickAllSpansWithClassWithDelay();
以下のメッセージが出てきたら言われた通り「allow pasting」を入れてみてね。日本語のメッセージだったら日本語で入れてね。
Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘allow pasting’ below to allow pasting.
動作イメージ
