Coloring of header/footer doesn't work

[TomasChmelik]

Extension Version

1.8.13

Description

I have setup custom color for my SSO profile and have enabled "Colorize header" and "Colorize footer". The profile shows with the correct color in extension dialog for selecting a profile. But when I assume that role and AWS console is openned it has default colors.

Is this not supported by Edge? Is there something I forgot to configure in the extension? Is there something I have to configure in AWS to enable this?

This extension saved my life after my company moved to just SSO. Absolutely love it!

Browsers

Edge

OS

Windows

[WTFender]

@TomasChmelik Hey, should definitely be working on Edge.

Could you double check the extension's permissions for me?

Navigate to edge://extensions & confirm these are all checked:

[TomasChmelik]

Yes, all of those permissions are checked. I also allowed it in private windows

I also have DarkReader extension installed, but it is not enabled on AWS sites.

Could it be caused by AWS user settings? I have enabled Dark Mode and I have some services in favourite list. That's about it for differences from the demo video of which I can think of.

[TomasChmelik]

Any other ideas? Np if not, since it is very much a nice-to-have feature

[timorthi]

@WTFender Chiming in as I'm also unable to get the custom header/footer to work (though it's the console label that I really care about).

I've tried this on Chrome 122.0.6261.94 and Brave 1.67.123 but both do not override the header when signed into an account. I've double-checked the extension permissions too and it's the same as in your previous comment.

[vStone]

I have the following error in my console:

Error: Timeout: Element not found with selector "#menu--account"

(Version 1.8.15)

[WTFender]

@TomasChmelik @timorthi any chance you have other extensions or "customizations" on your AWS console page?

The extension does rely on some of the default CSS and page layout to update things. @vStone's error would indicate his extension isn't finding the right HTML elements to update in time. The extension gives the elements 3 seconds to show up before timing out.

Are your pages loading noticeably slow?

[timorthi]

@WTFender I just tried disabling all other extensions, but nothing changed still 😞 My AWS console loads reasonably fast -- the page structure (header/footer etc.) definitely renders in well under 3 seconds -- so I am not seeing the Timeout error that vStone reported.

Is there an easy way to enable debug logs on the extension? Maybe that'll help us get to the bottom of it.

[timorthi]

@WTFender I had some time to clone the repo and load the dev build to see what's happening. I've found the issue for my specific case, not sure if it applies to @TomasChmelik but hopefully it does!

---

For me, this check is failing.

This is caused by the aws.ssoRoleName value being extracted incorrectly. In my case, my role name contains multiple underscores, e.g. AWSReservedSSO_1234567_FullAdminAccess_38asjk287a/timorthi@example.com. Currently, this only returns 1234567 rather than the expected 1234567_FullAdminAccess_38asjk287a/timorthi@example.com.

I addressed this on my end by making two tweaks, though you may want to confirm that my assumptions about the role names are correct:

First, in the ssoRoleName function, I stripped the prefix AWSReservedSSO_ using substring():

function ssoRoleName(roleName: string): string | null {
  ...
  return roleName.substring('AWSReservedSSO_'.length)
}

Using the example above, this results in a return value of 1234567_FullAdminAccess_38asjk287a/timorthi@example.com.

My app profile name is 1234567_FullAdminAccess (i.e. it does not contain the unique suffix _38asjk287a at the end), so I still had to address that part.

To do this, in the findAppProfile function, I cross-check the app profile name and current role name by using startsWith:

    data.users.forEach((user) => {
      if (user.userId === activeUserId) {
        data.appProfiles.forEach((ap) => {
          if (ap.applicationName === 'AWS Account') {
            if (
              ssoRoleName.startsWith(ap.profile.name) // <-- this is the change
              && ap.searchMetadata?.AccountId === accountId
            ) {
              appProfiles.push(this.customizeProfiles(user, [ap])[0]);
            }
          }
        });
      }
    });

At runtime, the check is then:

'1234567_FullAdminAccess_38asjk287a/timorthi@example.com'
  .startsWith('1234567_FullAdminAccess')

After making this change, my header & footer are correctly colorized according to my settings, and the profile label in the header works as expected.

[WTFender]

@timorthi thank you for the research!

I confirmed rolenames with underscores ARE an issue for me and will get a fix out for it ASAP.

That said, I'm not seeing the errors in my console, so there's potentially 2 separate issues here.

[WTFender]

@timorthi I went with removing the custom suffix and stayed with the exact match rather than using startsWith - if you have overlapping rolenames like Read and ReadWrite it could match on the wrong one.

  // AWSReservedSSO_ROLE_WITH_UNDERSCORES_641d4a863dea1899/wtfender
  // to
  // ROLE_WITH_UNDERSCORES
  return roleName.substring('AWSReservedSSO_'.length).split('/')[0].slice(0, -17);

[WTFender]

@TomasChmelik in your screenshot, you're missing this part of your console... does that show up when you disable the extension? Is that a setting somewhere?

[TomasChmelik]

I just clipped it from the screenshot.

I get no error in the console, just couple of warnings about [Deprecation] -ms-high-contrast is in process of being deprecated

Also if you want to remove first and last part of a string before/after underscore you could use roleName.split('_').slice(1, -1).join('_')

[timorthi]

@WTFender The latest release works perfectly for me. Thanks for the quick turnaround!