はじめに

AWSのマネジメントコンソールで、複数オブジェクトにチェックを入れて、まとめてダウンロードしたくなりますよね。ただ「ダウンロード」ボタンが無効になってダウンロード出来ません。とにかく何とかしてみました！

Chrome拡張機能

Chrome拡張機能を作りました。ChromeとEdgeで使用できます。
↓バナーをクリックしてインストール

説明の通り、Chrome拡張機能を入れると、追加のダウンロードボタンが表示されます。複数のオブジェクトにチェックを入れてこのボタンを押すことで、連続してダウンロードすることができます。

制約事項

(*1) フォルダはダウンロードできません。
(*2) 最初にS3オブジェクトのページで、画面リロードが必要です。

ソースコード

Qiitaの技術記事なので、ソースコードと解説を書きます。

script.js

const _sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const getS3Obj = async () => {
    const dl_btn = document.getElementById("download-object-button");
    let target=[];
    let input_list = document.querySelectorAll("input[type=checkbox]:checked");

    // 対象のチェックボックスを取得する
    input_list.forEach((e, index)=>{
        if (e.className.startsWith('awsui_native-input_')){
            target.push(index);
            input_list[index].click();
        }
    });
    // 1つずつチェックして、ダウンロードする。ウェイト1S
    for (let i = 0; i < target.length; i++) {
        input_list[target[i]].click();
        dl_btn.click();
        input_list[target[i]].click();
        await _sleep(1000);
    }
    // チェックボックスを元に戻す
    target.forEach((e)=>{
        input_list[e].click();
    });
}

// 拡張ダウンロードボタンを配置する
// icon: https://css.gg/arrow-down-o
const putButton = () => {
    const append_btn = document.getElementById("append-button");
    if (append_btn == null) {
        const pos = document.getElementById("download-object-button");
        if (pos == null) return;
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.id = 'append-button';
        btn.onclick = getS3Obj;
        btn.className = 'gg-arrow-down-o';
        pos.parentNode.parentNode.insertBefore(btn, pos.parentNode.nextSibling);
    } 
}

// 1秒ごとに実行する
setInterval(putButton, 1000);

manifest.json

{
    "manifest_version": 3,
    "name": "S3 Multiple Downloader",
    "description": "Download checked s3 objects all at once",
    "version": "0.0.1",
    "icons": {
        "48" : "s3_48.png"
    },
    "content_scripts": [
        {
            "matches": ["https://s3.console.aws.amazon.com/s3/buckets/*"],
            "js": ["script.js"],
            "css": ["script.css"]
        }
    ]
}

解説

設計はシンプルです。たいしたことはしていません。
- チェックが入ったチェックボックスを覚える
- 1つずつチェックを入れて、ダウンロードボタンを押す
- チェックボックスを元に戻す

(*1) このような動作のため、フォルダを選択してもダウンロード出来ないです。

ダウンロードが連続だとうまくいかず、1秒ウエイトを入れたら解消しました。
ページの変更監視がうまくいかず、仕方なく1秒ごとに実行するようにしました。
MutationObserverで監視などをやってみたが、うまくいきませんでした。
対象のページに入ったときに実行されません。
(*2) そのため、S3オブジェクトのページで、画面リロードが必要です。

おわりに

そもそも、複数ダウンロードを一括で出来ないようにしているのは理由があるのでしょう。こんなChrome拡張機能はどうなんでしょうね。
AWSのマネジメントコンソールの仕様が変わったら使えなくなります。
Chrome拡張機能は、いろいろできて面白いです！Edgeでも使えるとは驚きでした。
拡張ダウンロードボタンをスマートに配置する方法を知りたいです。

謝辞

ボタンにしているCSSアイコンは https://css.gg から、使わせてもらいました。