AWS access portal でアカウントの並び順を直す（IdC：IAM Identity Center）

はじめに

2026年4月22日ごろ、AWS access portal（IAM Identity Center）の「アカウント」タブで、AWSアカウントの並び順の初期表示が従来アカウント名順であったものが、ランダムになるというUIの変更があった。

この手のログイン選択画面で並び順がランダムなのがUIアンチパターンであることは明らかであり、開発者各位は現在進行形でちょっとした悲しみに包まれていることが予想される。

本記事では、表のヘッダをクリックすると並び替えられることに着目し、この並び替えクリックを自動化するChrome拡張機能を用いてこの問題に対抗する。

※以下、本記事に記載のコードはすべてコーディングエージェント（Kiroエディタ）で生成しました

コード

README.md

# AWS Access Portal Auto Sort

AWS Access Portal（`https://*.awsapps.com/start/`）のアカウント一覧を、ページ読み込み時に**アカウント名の昇順**で自動ソートする Chrome 拡張機能です。

## インストール方法

1. このフォルダに `icon.png`を用意する
   - `icon.svg` を任意のツールで PNG に変換するか、省略しても動作します
   - アイコンが不要なら `manifest.json` の `icons` セクションを削除してください
2. Chrome で `chrome://extensions` を開く
3. 右上の「デベロッパーモード」を有効にする
4. 「パッケージ化されていない拡張機能を読み込む」をクリック
5. このフォルダを選択する

## 仕組み

- AWS Access Portal のページが読み込まれると、`content.js` が自動実行されます
- テーブルの「アカウント名」ヘッダー（`data-focus-id="sorting-control-name"`）を検出し、自動でクリックします
- `aria-sort` 属性を確認し、昇順（ascending）になるまでクリックを繰り返します
- テーブルの描画を最大 15 秒間ポーリングで待機します

## ファイル構成

manifest.json   - 拡張機能の設定
content.js      - ソート実行スクリプト
icon.png        - アイコン原本（PNG）
README.md       - このファイル

manifest.json

{
  "manifest_version": 3,
  "name": "AWS Access Portal Auto Sort",
  "version": "1.0.0",
  "description": "AWS Access Portalのアカウント一覧をアカウント名順で自動ソートします",
  "permissions": [],
  "content_scripts": [
    {
      "matches": [
        "https://*.awsapps.com/start/*"
      ],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "icons": {
    "48": "icon.png",
    "128": "icon.png"
  }
}

content.js

(() => {
  "use strict";

  const MAX_WAIT_MS = 15000;
  const POLL_INTERVAL_MS = 500;

  /**
   * アカウント名ヘッダーのソートボタンを探してクリックする。
   * 見つかって昇順ソートが適用されたら true を返す。
   */
  function tryClickSortHeader() {
    // data-focus-id="sorting-control-name" を持つ要素がソートボタン
    const sortBtn = document.querySelector(
      '[data-focus-id="sorting-control-name"]'
    );
    if (!sortBtn) return false;

    // 親の <th> の aria-sort を確認
    const th = sortBtn.closest("th");
    if (!th) return false;

    const currentSort = th.getAttribute("aria-sort");

    // 既に昇順なら何もしない
    if (currentSort === "ascending") return true;

    // クリックしてソートをトグル
    sortBtn.click();

    // クリック後に昇順になったか確認（降順→昇順にするため2回必要な場合がある）
    const afterSort = th.getAttribute("aria-sort");
    if (afterSort === "ascending") return true;

    // 降順になった場合はもう一度クリックして昇順にする
    if (afterSort === "descending") {
      sortBtn.click();
    }

    return th.getAttribute("aria-sort") === "ascending";
  }

  /**
   * テーブルが描画されるまでポーリングで待機し、ソートを実行する。
   */
  function waitAndSort() {
    const start = Date.now();

    const timer = setInterval(() => {
      if (Date.now() - start > MAX_WAIT_MS) {
        clearInterval(timer);
        console.log("[AWS Auto Sort] タイムアウト: ヘッダーが見つかりませんでした");
        return;
      }

      if (tryClickSortHeader()) {
        clearInterval(timer);
        console.log("[AWS Auto Sort] アカウント名で昇順ソートしました");
      }
    }, POLL_INTERVAL_MS);
  }

  // ページ読み込み後に実行
  waitAndSort();
})();

icon.png

インストール手順

こちらの記事の「Chromeの場合」をご参照ください。
→　yoron0122さん
自作したChrome拡張機能をChrome・Egeブラウザにインストールする方法 - Qiita

結果

幸せになった。