はじめに

はじめてChrome拡張機能を作成したので備忘・まとめも兼ねて導入〜公開までを記載します。
作成した拡張機能はこちらです。気が向いたら使ってみてください。

背景

仕事でAWSのアカウントを１０〜２０個程度使用しています。
１つのアカウントにサインイン後スイッチロールしているため、認証情報は１つで済んでいますが、
たまにどのアカウントにスイッチしているのかがわからなくなってしまっていました。

テスト環境と間違えて本番で作業してしまうといったことも怖いので、
AWSアカウントの名前（どのアカウントにスイッチしているのか）をChrome拡張機能にてわかりやすく表示しようと考えました。

どんなものにするか

事前に拡張機能のオプション画面にて「AWSアカウントID」、「AWSアカウントの別名」、「表示色」を設定する
AWSマネージメントコンソールを表示した際に、設定したAWSアカウントに一致していれば「AWSアカウントの別名」が「表示色」で表示される。
表示する場所はフッター（どこにするか悩みましたがあんまり更新されなそうなフッターにしました。）
オプション画面のデザインやカラーピッカーの個別導入は面倒なのでVuetifyにて開発する

プロジェクト作成、Vuetify導入

vue-cliを使用してVuetifyを導入します。

# vue-cliのインストール
npm install -g @vue/cli

# vueプロジェクト作成（選択肢が出てきたのでVue２を選びました。）
vue create aws-account-detail-extension

# 移動
cd aws-account-detail-extension

# vuetify導入（Defaultを選択）
vue add vuetify

これだけでVuetifyが導入できたので、実行して試してみます。

yarn serve

Vuetifyのデフォルトの画面が表示できました！

実装

まずはAWSマネージメントコンソールへアクセスすると、フッターにアカウントIDが表示されるだけの拡張機能を作ります。

manifest.json作成

Chrome拡張機能の肝とも言えるmanifest.jsonを作ります。

ビルドした際にdistディレクトリ直下に作成されるようにしたいのでpublicディレクトリ内に作成します。

public/manifest.json

{
  "name": "AWSアカウント別名表示", 
  "version": "0.0.1",
  "manifest_version": 3,
  "description": "説明文",
  "content_scripts": [
    {
      "matches": ["https://*.console.aws.amazon.com/*"],
      "js": ["content.js"],
      "css": ["content.css"]
    }
  ]
}

name：拡張機能の名前です
manifest_version：manifestファイルのバージョンです。（2でも作成自体は可能でしたが、公開ができませんでした。）
content_scripts：ブラウザ上に表示されているページに対して、スクリプトを挿入してDOM操作等を行う際に使用します。
matchesで指定したURLが開かれた際にcontent.js、content.cssが適用されるイメージです。

AWSマネージメントコンソールで実行されるスクリプトの作成

content.js、content.cssも作成していきます。

public/content.js

// AWSマネージメントコンソールの右上の部分
// 同階層にspanタグが2〜3個あるが、「@」が含まれているものをユーザーネームとして取得する
let spanList = document.querySelectorAll("#nav-usernameMenu span span");
const displayName = Array.from(spanList).find((span) => {
  return span.title?.includes("@");
})?.title;

// 12桁のアカウントIDへ整形
const account_id = displayName
  ?.slice(displayName?.indexOf("@ ") + 2)
  .replaceAll("-", "");

// div要素を作りテキストとクラスを設定
let element = document.createElement("div");
element.textContent = account_id;
element.classList.add("account-details");

// 背景色、文字色を設定（後に変更することを考慮しcss外で設定）
element.style.backgroundColor = "#80DEEAFF";
element.style.color = "#000000FF";

// divをフッター部へ追加
let footer = document.querySelector("#awsc-nav-footer-content");
footer.appendChild(element);

public/content.css

.account-details {
  padding: 5px 10px;
  border-radius: 3px;
}

拡張機能の実行

Vue、Vuetifyは今の所まったく使っていませんが後に利用することを考えて、
ビルドしたものを拡張機能としてアップロード、実行します。

yarn build

ビルドするとルート直下にdistディレクトリが作成されることを確認してください。

拡張機能の管理ページへアクセスします。
※chrome://extensions/をChromeのURLバーへ入力するとアクセスできます。

右上のデベロッパーモードをONにすると選択できる「パッケージ化されていない拡張機能を読み込むを」クリックします。

ディレクトリ選択のダイアログが表示されるので、先程作成されたdistディレクトリを選択します。

拡張機能が追加できました。
この状態でAWSへサインインしマネージメントコンソールを開きます。

フッターにアカウントIDが表示されたことを確認できました！

まとめ

拡張機能は思ったよりも簡単に楽しく作ることができました。
現状はただアカウントIDを表示しているだけですが、次回はオプション画面の実装を行いたいと思います。