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

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

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

Motivation of development

My company starts switching from AWS Switch Role to AWS SSO for security reasons. However, we are worried that AWS SSO does not provide the feature to change color.

Changing color is a very simple, but efficient technique to avoid wrong operations. For example, making the production environment red helps operators to remind which environment they use.

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

After a little inspection, I decided to create a browser extension.

How it works

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

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

1. Getting account name from AWS SSO screen

AWS SSO screen has the pair of account ids and account names.

The cookie also has an 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 the browser extensions storage area. If you want to delete it, just uninstall the browser extension.

2. Getting account id and region in the management console.

Both account id and region are hidden in the management console.

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

// to get region
const region = document.getElementById('awsc-mezz-region')?.getAttribute('content')

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

Changing console color is just embedding CSS, but not simple.

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

The extension also detects how users logged in. If AWS SSO is used, the menu button name is replaced by the 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 welcome!

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