Building an Azure Chrome Extension to Display Resource Details

Vipul Malhotra's photo
Vipul Malhotra
·

2 min read

Introduction

This article covers the process of developing a Chrome extension that enhances the Azure Portal experience by adding a button to the "Create Azure Resource" page. When clicked, the button displays a popup showing detailed information about the properties of the resource being created. We'll explore the code, the extension's functionality, and provide a detailed walkthrough.

You can access the complete code for the Chrome extension in this GitHub repository:
👉 Azure Know-It Chrome Extension

Key Features of the Extension

  1. Seamless Integration:
    The extension adds a custom button to the Azure Portal's "Create Resource" page.

  2. Detailed Resource Information:
    Clicking the button triggers a popup that dynamically displays key properties and metadata for the selected Azure resource.

  3. User-Friendly Interface:
    The popup is designed to be informative and easy to navigate, enhancing the user experience by providing valuable insights without leaving the page.

Code Overview

Main Components:

  1. Manifest File (manifest.json):
    Defines the extension's structure, permissions, and scripts to be injected.

  2. Content Script:
    Injected into the Azure Portal's DOM, this script adds the button and handles the popup's display.

  3. Popup HTML & JavaScript:
    These files control the content and behavior of the popup, fetching and displaying resource details.

Highlights:

  • Button Injection Logic:
    The content script locates the target DOM element on the "Create Resource" page and appends the custom button.

  • Data Retrieval:
    The extension uses Azure's API (or the page's existing data structures) to extract resource details.

  • Popup UI:
    Built using standard HTML/CSS, ensuring a responsive and clean design.

How It Works

  1. Button Placement:
    Upon loading the "Create Resource" page, the content script adds a new button labeled "Resource Details."

  2. Popup Trigger:
    Clicking this button opens a popup displaying relevant resource information, such as configuration options, pricing, and more.

  3. Dynamic Data Loading:
    The popup fetches data in real-time, ensuring that users always see the most up-to-date information.

Installation and Setup

  1. Clone the Repository:
git clone https://github.com/vipulm124/azure-knowit.git
cd azure-knowit

  • Load the Extension in Chrome:

    • Open Chrome and navigate to chrome://extensions/.

    • Enable "Developer mode."

    • Click "Load unpacked" and select the extension's directory.

  • Test on Azure Portal:
    Navigate to the "Create Resource" page in the Azure Portal. You should see the new button appear.

Demo Video Placeholder

🚀 Watch the Extension in Action!

Demo Video

Conclusion

This Chrome extension simplifies the process of creating Azure resources by providing instant access to crucial details. It's a valuable tool for Azure developers and administrators who want to streamline their workflow and make more informed decisions.

For any feedback or contributions, feel free to visit the GitHub repository.

Happy coding! 💻✨

chrome extensionreact js