Aem Quick Check

The AEM Quick Check Chrome extension is a productivity-enhancing solution designed for professionals working with Adobe Experience Manager. It empowers developers, QA engineers, and Scrum Masters to quickly access critical page information, debug components, and perform on-page checks—all from an intuitive interface. This eliminates the need for tedious manual navigation and makes discussions during team meetings or stand-ups more efficient.

💎 Key Features

1. Domain Management
- Add and manage multiple AEM domains.
- Quickly switch between configured AEM environments.
- Retains the last selected domain for convenience.

2. Page Status
- Retrieve and display detailed page information from the `.json` API endpoint, including:
- Created By: The user who created the page.
- Created On: The timestamp of when the page was created.
- Template: The template associated with the page.
- Last Published: The last rollout date of the page.
- Last Modified: The timestamp of the last modification.
- Modified By: The user who last modified the page.

3. Quick Edit
- Edit Page Properties: Open the AEM properties editor for the current page.
- Edit Page: Launch the AEM editor for quick page modifications.
- Edit Template: Navigate to the structure editor of the template associated with the current page.

4. Color Format Switcher
- Toggle between `RGB` and `HEX` formats for color values detected on the page.
- Displays all the colors used on the page in a visually appealing layout.
- Hover over any color to view its value.

5. Component Debugging
- Highlight AEM components on the page for easy identification.
- Displays component class names directly on the page.

6. Accessibility Checks
- External Links: Highlight all external links on the page.
- Missing Alt Text: Identify and highlight images missing `alt` attributes.
- Image Paths and Resolutions:
- View the paths of all images on the page.
- Display the rendered resolution of images for performance optimization.

7. SEO Checks
- Extract and display meta tags from the current page, including:
- Open Graph (`og:*`) properties.
- Twitter meta tags.
- Standard meta tags like `description` and `keywords`.

🚀 How to Get Started

- Install the AEM Quick Check extension from the Chrome Web Store.
- Open your AEM Author page in WCM disabled mode.
- Run the extension by clicking on its icon in the browser toolbar.

⚠️ Note

- Config Tab features are only available in the AEM Page Editor and WCM disabled mode.
- For non-AEM sites, the Config Tab cannot be utilized, but other features of the extension remain accessible.

🔰 Use Cases

- Developers: Debug and enhance AEM pages with on-page insights and visual tools.
- Content Authors: Quickly access and edit page properties or templates without navigating AEM menus.
- Scrum: Speed up team discussions during stand-ups or meetings by instantly accessing required information, reducing time spent manually finding details.
- Designers: Analyze brand colors and fonts used on the page.

👨‍💻 Developed by

- Mayur Satav

This tool is a joint effort by two AEM specialists with deep experience in enterprise content management, digital experience platforms, and front-end engineering.