AWS Peacock Management Console enables to change console color as you like.

AWS Peacock Management Console enables user to change the color of AWS management console as like.

The browser extension is now available on both Chrome Web Store and mozzila add-on.

In this article, the developer of the extension explain the motivation of development and how it works.

Motivation of development

My company starts switching from AWS Switch Role to AWS SSO by security reason. However, we worried that AWS SSO does not provide change color feature.

Changing color is very simple, but efficient technique to avoid wrong operation. For example, make production environment as red helps operator to remind which environment they use.

AWS SSO has another problem. Account name is not shown in menu button. Not setting account alias is usual if AWS SSO is used. In my opinion, account name instead of account alias should shown in menu button.

After little inspection, I decide to create browser extension.

How it works

There are 3 steps to change color and show account name.

1. Getting account name from AWS SSO screen
2. Getting account id and region in management console.
3. Change color and menu button name in management console.

1. Getting account name from AWS SSO screen

AWS SSO screen has the pair of account id and account name.

Cookie also has account name, but using it is not enough. When the user switched role beyond account from AWS SSO logged in user, the parameter does not change.

The account name information is stored in browser extensions storage area. If you want to delete it, just uninstall browser extension.

2. Getting account id and region in management console.

Both account id and region is hidden in management console.

// to get account idconst id = (document.querySelector<HTMLElement>('button[data-testid="awsc-copy-accountid"]')?.previousElementSibling as HTMLSpanElement)?.innerText.replace(/\-/g, '')// to get regionconst region = document.getElementById('awsc-mezz-region')?.getAttribute('content')

3. Change color and menu button name in management console.

Chage console color is just embedding css, but not simple.

To ensure visibility, AWS Peacock Management Console can invert the menu icon and string color.

Extension also detects how user logged in. If AWS SSO is used, menu button name is replaced by account name.

Conclusion

AWS Peacock Management Console is developed to use AWS SSO convenient as AWS Switch Role.

The extension is released in Chrome Web Store and mozzila add-on. Source code is also available in GitHub. Any issues or contribution is welome!

If this extension helps to improve your productivity, it is glad for me.