Creating a Chrome Extension for Easy Redirection to Multiple AEM Instances
Creating a Chrome Extension for Easy Redirection to Multiple AEM Instances
As developers or content authors working with Adobe Experience Manager (AEM), you may often find yourself switching between different environments like local, dev, UAT, and production. Constantly typing or bookmarking URLs can be cumbersome, especially when you have multiple instances of AEM running.
In this blog post, I will walk you through how to create a custom Chrome extension that allows you to easily switch between your AEM instances with a single click.
Why a Chrome Extension?
A Chrome extension is a handy tool to quickly access commonly used URLs. By setting up buttons for each AEM instance (local author, dev publish, UAT author, etc.), you can streamline the process of navigating between environments, saving time and minimizing errors.
What You’ll Need
- Basic knowledge of HTML, JavaScript, and JSON.
- Chrome browser for testing.
- Your AEM instance URLs.
Let’s dive into the steps!
Step 1: Create the Folder Structure
Start by creating a folder on your system that will house all the files for your Chrome extension. Name it something like AEMRedirectExtension. Inside this folder, you will need four key files:
- manifest.json
- popup.html
- popup.js
- icon.png (optional)
Step 2: Define the Manifest File
The manifest.json file contains essential details about your Chrome extension such as the version, name, permissions, and which files to execute. Here's a simple version of what this might look like:
{
"manifest_version": 3,
"name": "AEM Instance Redirect",
"version": "1.0",
"description": "Quickly redirect to different AEM instances.",
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"permissions": [
"tabs"
]
}
This file ensures Chrome recognizes your extension and provides the right permissions to manage tabs when users click on any AEM environment button.
Step 3: Create the Popup Interface
The popup.html file is what users will interact with. This simple HTML file will contain buttons to redirect users to their desired AEM instance. Here’s the code:
<!DOCTYPE html>
<html>
<head>
<title>AEM Redirect</title>
<style>
/* Container for flexbox layout */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 300px; /* Set a fixed width for the container */
}
/* Styling for buttons */
button {
width: 30%; /* Each button takes up 30% of the container width */
padding: 10px;
margin: 5px 5px; /* Add margin between buttons */
font-size: 12px;
text-align: center;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
box-sizing: border-box; /* Ensure padding is included in button size */
}
button:hover {
background-color: #0056b3;
}
h3 {
margin: 10px 0; /* Add some margin to the heading */
text-align: center;
}
</style>
</head>
<body>
<h3>Redirect to AEM Instance</h3>
<div class="container">
<button id="localAuthor">Local Author</button>
<button id="localPublish">Local Publish</button>
<button id="devAuthor">Dev Author</button>
<button id="devPublish">Dev Publish</button>
<button id="uatAuthor">UAT Author</button>
<button id="uatPublish">UAT Publish</button>
<button id="prodAuthor">PROD Author</button>
<button id="mntPublish">PROD Publish</button>
</div>
<script src="popup.js"></script>
</body>
</html>
Each button corresponds to an AEM instance, like local author, dev publish, etc. The popup.js file (explained in the next step) will handle the redirection logic when users click any of these buttons.
Step 4: Add the Redirection Logic
In the popup.js file, define the logic that will handle the redirection to the appropriate AEM instance. Below is the JavaScript code you will use:
// Define your AEM instance URLs here
const urls = {
localAuthor: 'http://localhost:4502',
localPublish: 'http://localhost:4503',
devAuthor: 'http://dev-author.example.com',
devPublish: 'http://dev-publish.example.com',
uatAuthor: 'http://uat-author.example.com',
uatPublish: 'http://uat-publish.example.com',
mntAuthor: 'http://mnt-author.example.com',
mntPublish: 'http://mnt-publish.example.com'
};
// Add event listeners to each button
document.getElementById('localAuthor').addEventListener('click', () => redirect(urls.localAuthor));
document.getElementById('localPublish').addEventListener('click', () => redirect(urls.localPublish));
document.getElementById('devAuthor').addEventListener('click', () => redirect(urls.devAuthor));
document.getElementById('devPublish').addEventListener('click', () => redirect(urls.devPublish));
document.getElementById('uatAuthor').addEventListener('click', () => redirect(urls.uatAuthor));
document.getElementById('uatPublish').addEventListener('click', () => redirect(urls.uatPublish));
document.getElementById('mntAuthor').addEventListener('click', () => redirect(urls.mntAuthor));
document.getElementById('mntPublish').addEventListener('click', () => redirect(urls.mntPublish));
// Function to redirect to a given URL
function redirect(url) {
chrome.tabs.create({ url });
}
Each button is linked to a specific AEM instance URL, and when clicked, it opens the respective URL in a new tab.
Step 5: Load the Extension into Chrome
Now that all the files are ready, you can load your extension into Chrome for testing.
- Open Chrome and go to
chrome://extensions/. - Enable "Developer mode" by toggling the switch in the top-right corner.
- Click on the "Load unpacked" button and select the folder where you’ve saved your extension files.
- Your extension should now be visible in Chrome!
Step 6: Test and Use!
Click on your newly created extension icon, and you’ll see buttons for each of your AEM instances. Simply click a button to open the corresponding instance in a new tab.
Conclusion
Creating a Chrome extension to manage multiple AEM instances can significantly streamline your workflow, whether you're a developer or a content author. Instead of manually navigating through bookmarks or retyping URLs, you can now switch between instances with ease.
Feel free to extend the extension further—add icons, improve the UI, or even add more instances if your AEM environment expands!
Give it a try and let me know how it goes!
Comments
Post a Comment