Chrome Extension for Azure portal

This extension can add features to Azure portal.

Note: this extension is NOT Microsoft official and Azure is a trademark of the Microsoft group of companies.

azure-portal-plus-extension-demo.mp4

Features

1. Replace favicon to one of the resource displayed

Default state:

This feature enabled:

Favicon replacement rules

The favicon is replaced by the following rules.

Rule1

The icon of the resource group is used as the favicon of the tab, when your browser's tab is opening Azure Resource Groups or your resources in a resource group.

Rule2

The icon of the service is used as the favicon of the tab, when your browser's tab is opening an Azure Service (ex. Virtual Machines, Storage accounts, and so on).

Note In case of App Services, the icon of Web Apps is used though App Services contains not only Web Apps resource but also Function App resource.

Rule3

The icon in top of the blade list (i.e. Overview ) is used as the favicon of the tab, when your browser's tab is opening your Azure resource.

2. Blink favicon during configuration

When starting a process taking long time (deploying new resouces, changing configuration of your resources or deleting your resources), the favicon of the tab is blinked until the process finishes.

3. Notify when finishing configuration

When finishing a process taking long time, a notification is displayed on your desktop, and the tab can be activated by clicking the notification.

4. Activate the portal tab when finishing configuration (Experimental)

When finishing a process taking long time, the tab opening Azure portal is activated (i.e. to be brought to the top) automatically.

5. Copy resouce information (v0.0.5 or later)

Add the following copy menu to the resource page's header and disable built-in Copy title to clipbord in More content actions menu.

Note

This feature is available only for each resouce page.
On subscriptions, resource groups and Entra ID pages, the copy button is not shown.

Supported formats

• Resource name

  copy_resource_name.mp4

• Resource Id
  format:

  /subscriptions/{subscription_id}/resourceGroups/{resource_group_name}/providers/{resource_provider_name}/{resource_type}/{resource_name}
  

  copy_resource_id.mp4

• Resource name and group as Azure CLI option
  format:

  --name {resource_name} --resource-group {resource_group_name}

  copy_as_azcli_options.mp4

• Resource name and group as Azure PowerShell option
  format:

  -Name {resource_name} -ResourceGroup {resource_group_name}

  copy_as_azpwsh_options.mp4

• Resource Template (JSON)
  format:

  {
    "name": "{resource_name}",
    "id": "/subscriptions/{subscription_id}/resourceGroups/{resource_group_name}/providers/{resource_provider_name}/{resource_type}/{resource_name}",
    "type": "{resource_provider_name}",
  
      :
  }

  copy_as_arm_json.mp4

• Resource Template (Bicep) (v0.0.8 or later)
  NOTE: This feature depends on exporting function on Azure Platform.

  format:

  param storageAccounts_stabc123_name string = 'stabc123'
  
  resource storageAccounts_stabc123_name_resource 'Microsoft.Storage/storageAccounts@2024-01-01' = {
    name: storageAccounts_stabc123_name
  
      :
  }

  copy_as_arm_bicep.mp4

• Terraform (AzApi) (v0.0.8 or later)
  NOTE: This feature depends on exporting function on Azure Platform. Registering Resource Provider Microsoft.AzureTerraform for your subscription is required.

  format:

  terraform {
    required_providers {
      azapi = {
        source  = "Azure/azapi"
        version = "2.0.1"
      }
    }
  }
  provider "azapi" {}
  resource "azapi_resource" "res-0" {
    body = {
    kind = "Storage"
    properties = {
      allowBlobPublicAccess        = true
        :
  }

  copy_as_tf_azapi.mp4

• Terraform (AzureRM) (v0.0.8 or later)
  NOTE: This feature depends on exporting function on Azure Platform. Registering Resource Provider Microsoft.AzureTerraform for your subscription is required.

  format:

  terraform {
    required_providers {
      azurerm = {
        source  = "azurerm"
        version = "4.5.0"
      }
    }
  }
  provider "azurerm" {
    features {}
  }
  resource "azurerm_storage_account" "res-0" {
    access_tier                       = ""
    account_kind                      = "Storage"
      :

  copy_as_tf_azurerm.mp4

• VM and Bastion Ids as `az network bastion` option (v0.0.9 or later)
  NOTE: This feature shows on Virtual Machine resource that can be connected via Azure Bastion with Standard / Premium SKU only.

  format:

  --ids {basion_resource_id} --target-resource-id {vm_resource_id}

  copy_as_bastion_options.mp4

6. Restore filter string on each list view (v0.0.6 or later) (Experimental)

By storing filter string on inputting/updating on each list view, this can restore the filter string on the list view when opening the list view again.

7. Open in the preview portal (v0.0.8 or later) (Experimental)

When your resource is opened in portal.azure.com, you can open it in preview.portal.azure.com from the context menu, and vice versa.

Note

To open the context menu on Azure portal, you need to use right-click with ctrl key.

8. Restore the flag for hidden resources on each list view (only v0.0.10) (Experimental)

Note

This feature works only on v0.0.10 because Azure portal doesn't support the flag for hidden flag currently.

By storing the state of the flag for hidden resources on each list view, this can restore the state on the list view when opening the list view again.

9. Decorate resource group list depending on the number of resources included in each group (v0.0.10 or later) (Experimental)

The font color and background color can be changed based on the number of the resources in each resource group.

The default decoration colors are:

# of resources	light mode		dark mode
	font color	background color	font color	background color
0	rgb(127,127,127)	rgba(223,223,223,0.7)	rgb(127,127,127)	rgba(32,32,32,0.7)
1-2	rgb(0,0,255)	rgba(0,0,255,0.2)	rgb(127,127,255)	rgba(0,0,255,0.2)
3-9	rgb(0,127,0)	rgba(0,255,0,0.1)	rgb(63,127,63)	rgba(0,255,0,0.1)
10-	rgb(255,0,0)	rgba(255,0,0,0.1)	rgb(255,127,127)	rgba(255,0,0,0.1)

The CSS for the default colors is:

/* for light mode */
/* for more than ten resources */
.fxs-mode-light [class^=appls-resource-count-] a { color: rgb(255,0,0); }
.fxs-mode-light [class^=appls-resource-count-] > div {background-color: rgba(255,0,0,0.1);}

/* for between three and nine resources */
.fxs-mode-light [class^=appls-resource-count-00] a {color: rgb(0,127,0);}
.fxs-mode-light [class^=appls-resource-count-00] > div {background-color: rgba(0,255,0,0.1);}

/* for one or two resources */
.fxs-mode-light .appls-resource-count-002 a,
.fxs-mode-light .appls-resource-count-001 a {color: rgb(0,0,255);}
.fxs-mode-light .appls-resource-count-002 > div,
.fxs-mode-light .appls-resource-count-001 > div {background-color: rgba(0,0,255,0.2);}

/* for no resource */
.fxs-mode-light .appls-resource-count-000 a {color: rgb(127,127,127);}
.fxs-mode-light .appls-resource-count-000 > div {background-color: rgba(223,223,223,0.7);}

/* for dark mode */
/* for more than ten resources */
.fxs-mode-dark [class^=appls-resource-count-] a { color: rgb(255,127,127); }
.fxs-mode-dark [class^=appls-resource-count-] > div {background-color: rgba(255,0,0,0.1);}

/* for between three and nine resources */
.fxs-mode-dark [class^=appls-resource-count-00] a {color: rgb(63,127,63);}
.fxs-mode-dark [class^=appls-resource-count-00] > div {background-color: rgba(0,255,0,0.1);}

/* for one or two resources */
.fxs-mode-dark .appls-resource-count-002 a,
.fxs-mode-dark .appls-resource-count-001 a {color: rgb(127,127,255);}
.fxs-mode-dark .appls-resource-count-002 > div,
.fxs-mode-dark .appls-resource-count-001 > div {background-color: rgba(0,0,255,0.2);}

/* for no resource */
.fxs-mode-dark .appls-resource-count-000 a {color: rgb(127,127,127);}
.fxs-mode-dark .appls-resource-count-000 > div {background-color: rgba(32,32,32,0.7);}

And you can change the style by using the User CSS extensions (i.e. Stylus etc.)

• Example: Hide empty resource groups
  https://userstyles.world/style/23821

10. Keep Azure Cloud Shell session alive more than 20 minutes (v0.0.11 or later) (Experimental)

n Azure Cloud Shell, sessions are automatically disconnected after 20 minutes of inactivity.

This feature overrides the default timeout, allowing users to maintain an active Cloud Shell session beyond the 20-minute inactivity limit.

Note

This feature is available only on beta version of Azure Cloud Shell, doesn't work on classic version of it.

Try this

From Chrome Web Store

This extension can be installed from Chrome Web Store.

From this repository

If you can try a development version, the following steps are needed.

1. get contents of this repository
   1. clone this repository
      or
   2. download zip file and extract it
2. open chrome://extensions
3. enable Developer mode and click Load Unpacked
   1. Google Chrome
      
   2. Microsoft Edge
      
4. select the directory created by cloning at step 1.

Change logs

See CHANGELOG.md.