Angular DevTools Extension: Component Inspector

This challenge tasks you with building a basic DevTools extension for Angular that allows developers to inspect the component hierarchy and properties of an Angular application. Such an extension is invaluable for debugging, understanding application structure, and identifying performance bottlenecks related to component rendering. You'll be leveraging Angular's DevTools API and creating a panel within the Chrome DevTools.

Problem Description

You need to implement a Chrome DevTools extension that provides a panel displaying information about the currently active Angular component. The panel should:

1. Detect Angular Components: The extension should be able to identify and list all currently active Angular components in the inspected page. This requires utilizing the Angular DevTools API to access component information.
2. Display Component Hierarchy: Present the component hierarchy in a tree-like structure within the DevTools panel. The root of the tree should be the root Angular component.
3. Show Component Properties: When a component in the tree is selected, display its properties (e.g., @Inputs, @Outputs, data properties) in a separate section of the panel. This should include the property name and its current value.
4. Update Dynamically: The panel should automatically update whenever the Angular component tree changes (e.g., components are added, removed, or properties are modified).
5. Error Handling: Gracefully handle cases where the Angular DevTools API is not available (e.g., the page is not an Angular application or the DevTools API is not properly initialized). Display an appropriate message in the panel.

Key Requirements:

• Use TypeScript for the extension's code.
• Utilize the Angular DevTools API (specifically, the getAngularComponents() function).
• Create a Chrome DevTools panel using the DevTools API.
• Implement a mechanism to update the panel content dynamically.
• The extension should be compatible with modern Angular versions (Angular 14+).

Expected Behavior:

• When the extension is enabled, a new panel appears in the Chrome DevTools.
• The panel displays a tree view of the Angular component hierarchy.
• Selecting a component in the tree displays its properties.
• Changes to the component tree or properties are reflected in the panel in near real-time.
• If Angular DevTools API is unavailable, the panel displays a message indicating this.

Edge Cases to Consider:

• Multiple Angular Applications: The page might contain multiple Angular applications. The extension should focus on the application that is currently active (e.g., the one that triggered the DevTools inspection).
• Asynchronous Property Updates: Component properties might be updated asynchronously. The extension should handle these updates correctly.
• Large Component Trees: The component tree might be very large. The extension should be performant and avoid blocking the DevTools UI.
• Component Lifecycle Events: Consider how component creation, destruction, and other lifecycle events affect the displayed information.

Examples

Example 1:

Input: An Angular application with a root component 'AppComponent' containing a child component 'MyComponent'. MyComponent has a property 'name' with the value 'Test'.
Output:
- AppComponent
  - MyComponent (name: Test)
Explanation: The panel displays a tree structure showing the component hierarchy. Selecting 'MyComponent' shows its 'name' property and its value.

Example 2:

Input: A page without any Angular components.
Output: "No Angular components found on this page."
Explanation: The panel displays a message indicating that no Angular components were detected.

Example 3: (Edge Case)

Input: An Angular application where a component's 'name' property changes asynchronously after the panel is initially loaded.
Output: The panel automatically updates to reflect the new value of the 'name' property.
Explanation: The extension should listen for changes and update the UI accordingly.

Constraints

• Performance: The extension should not significantly impact the performance of the Chrome DevTools or the inspected Angular application. Avoid unnecessary DOM manipulations.
• API Usage: Primarily utilize the Angular DevTools API. Avoid relying on complex DOM manipulation or other techniques that might break with Angular updates.
• Memory Usage: Minimize memory usage to prevent memory leaks within the DevTools environment.
• Angular Version: The extension should be compatible with Angular 14 and later.
• Extension Size: Keep the extension's file size as small as possible for faster loading.

Notes

• You'll need to create a basic Chrome extension manifest file (manifest.json) to define the extension's metadata and permissions.
• The Angular DevTools API is available through the chrome.devtools.inspectedWindow.eval() function.
• Consider using a reactive programming library (e.g., RxJS) to handle asynchronous updates and component lifecycle events.
• Focus on the core functionality of displaying the component hierarchy and properties. Advanced features like component editing or code navigation are beyond the scope of this challenge.
• The goal is to demonstrate a solid understanding of the Angular DevTools API and the ability to build a basic DevTools extension in TypeScript.