aem-helper-extension

AEM Helper Extension

A Chrome extension designed to enhance the Adobe Experience Manager (AEM) development workflow. This extension provides quick access to commonly used AEM tools, debug modes, and navigation shortcuts directly from your browser.

🌟 Features

Quick Actions

Debug Tools

Quick access to essential AEM interfaces organized by category:

Core

Content

System

Tools

Additional development and administration tools:

Settings

📦 Installation

From Chrome Web Store

  1. Visit the Chrome Web Store (link to be added when published)
  2. Click “Add to Chrome”
  3. Confirm the installation

Manual Installation (Developer Mode)

  1. Clone this repository: 
    git clone https://github.com/charlie-yc-tsai/aem-helper-extension.git

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

  3. Enable “Developer mode” (toggle in top right corner)

  4. Click “Load unpacked”

  5. Select the extension directory

  6. The AEM Helper extension icon should appear in your browser toolbar

🚀 Usage

  1. Navigate to any AEM page in your browser
  2. Click the AEM Helper extension icon in the toolbar
  3. Use the popup interface to:
    • Switch between different modes (Disabled, Edit)
    • Enable debug tools
    • Navigate to AEM administration interfaces
    • Access development tools

Configuration

Dark Mode

Toggle the “Dark Mode” switch in the header to change the theme. Your preference is saved automatically.

New Tab Behavior

Toggle the “New Tab” switch to control whether links open in:

🛠️ Technical Details

Permissions

The extension requires the following permissions:

File Structure

aem-helper-extension/
├── manifest.json          # Extension configuration
├── popup.html            # Extension popup interface
├── popup.js              # Extension logic and event handlers
├── popup.css             # Styling for the popup
├── css/                  # Font Awesome CSS files
├── webfonts/             # Font Awesome web fonts
└── images/               # Extension icons
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

🎨 Theme Support

The extension includes a built-in dark mode with carefully designed color schemes:

đź”’ Privacy

This extension respects your privacy:

For detailed privacy information, see the Privacy Policy.

🤝 Contributing

Contributions are welcome! If you’d like to contribute:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Development Setup

  1. Clone the repository
  2. Make your changes
  3. Test by loading the extension in Chrome (Developer mode)
  4. Ensure all features work as expected

đź“ť Version History

0.1.0 (Current)

📧 Contact

For questions, suggestions, or issues:

đź“„ License

This project is available for use under standard open-source practices. Please ensure compliance with Adobe’s terms of service when using this extension with AEM.

🙏 Acknowledgments

Note: This is an unofficial tool and is not affiliated with or endorsed by Adobe Systems Incorporated.

This site is open source. Improve this page.