はじめに
先日、AWSマネジメントコンソールの色をアカウントによって変更するChrome拡張機能を作成してリリースしました。
機能や使い方はこちらの記事をご覧下さい。
AWSマネジメントコンソールの色をアカウントによって変更するChrome拡張機能「AWS COLOR CHANGER」を作った
実装詳細
オプション画面はjqueryを使用して値を取得しています。
input要素を適当に配置しただけのHTMLですので特記する事はありません。
AWSのサイトで起動するスクリプトはJavaScriptです。
ソースはこちらに
https://github.com/sh-nakayama/AWS_COLOR_CHANGER
苦労した点
オプション画面で入力した値を保存して、AWSのマネコンのサイトで起動するJavaScriptに読み込ませるのに苦労しました。
最初はオプション画面で入力した値をlocalstrageに保存していましたが、
localStorageはページごとに保存するデータが分かれている事が判明、読み書きは同じ場所でないと値が共有できません。つまりAWSのマネコンのサイトで起動するJavaScriptではlocalStorageに保存した値が読めません。
回避方法はあるみたいですが、
https://mae.chab.in/archives/2861
苦労した点の対応
今回はchrome.storageを使用することで対応しました。
下記の記事を参考に作成しました。
https://easyramble.com/chrome-storage-set-and-get.html
https://qiita.com/shimutaya/items/e8835d6ce794ef6c73cf
終わりに
意外と簡単にリリースまでこぎつけました。
実は最も苦労した点はmanifestファイルかもしれません。スペルミスや、インデントミスでかなり時間を取られました
参考にさせていただいた記事
https://qiita.com/otchy/items/e29bf2e377c5b7ddc2f7
https://qiita.com/miztch/items/67e69421c33bf10b7b0a