前提条件・環境

Firebase を JavaScript プロジェクトに追加するで、SDKの追加と初期化が完了している
Storageのデフォルトパケット作成済
ファイルアップロード済
バケットURL指定済
SDKのインポートはCDNを使用

手順

1. ルールの書き換え

ListAPIの使用にはFirebase Storage Rules バージョン２が必要なため、Storageにルールを加えます。デフォルトではFirebaseにログインしないと読み書きできないので、必要に応じて書き換えます。今回はテスト用に特に制限を設けません。

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read;
    }
  }
}

2. SDKインポート


<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js">

※上記SDKを追加しないと下記エラーになります。
　"firebase.storage is not a function"

3. 参照の取得

var storage = firebase.storage();
var storageRef = storage.ref();

4. リスト表示

listAPIを使ってファイル参照一覧を取得します。

storageRef.listAll().then(function(result) {
  result.items.forEach(function(ref) {
  // 処理
  });
}).catch(function(error) {
  console.error(error);
});

デモコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>TEST</title>
  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js"></script>
</head>
<body>
  <p>Storageファイル一覧</p>
  <div id="table"></div>
  <script>
    var firebaseConfig = {
      ===== 省略 =======

      =================
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    // Get a reference to the storage service, which is used to create references in your storage bucket
    var storage = firebase.storage();

    // Create a storage reference from our storage service
    var storageRef = storage.ref();

    document.addEventListener('DOMContentLoaded', function() {
      var table = document.createElement( 'table' );
      var tableBody = document.createElement("tbody");

      storageRef.listAll().then(function(result) {
        result.items.forEach(function(ref) {
          var row = document.createElement("tr");
          var cell = document.createElement("td");
          cell.appendChild(document.createTextNode(ref.name));
          row.appendChild(cell);
          tableBody.appendChild(row);
          table.appendChild(tableBody);
        });
        document.getElementById("table").appendChild(table);
      }).catch(function(error) {
        console.error(error);
      })
    });
  </script>
</body>
</html>

結果

参考サイト

ウェブでファイルのリストを取得する
 How to get a list of all files in Cloud Storage in a Firebase app?

[Firebase]Storage上のファイル名一覧を表示する