Goal
Develop simple Chrome and Firefox browser Access and Edit Extension to open a published page in author instance. Assuming author is on default port http://localhost:4502 and publish on http://localhost:4503, this extension allows user to open a published page, for authoring in a new browser tab. Eg. if user has published page http://localhost:4503/content/geometrixx-outdoors/en.html open in a browser tab, clicking on the extension opens Classic UI http://localhost:4502/cf#/content/geometrixx-outdoors/en.html in new tab (if not logged in on author instance, the login page is shown first)
Demo
A very useful chrome extension that every AEM developer should have is available on chrome web store
Chrome
Firefox
Develop for Chrome
1) Create a folder C:\dev\open-page-in-author-browser-ext\chrome
2) Create file C:\dev\open-page-in-author-browser-ext\chrome\manifest.json with following data. Script eaem.js is the runtime for extension with necessary JS logic to open a new tab
{
"manifest_version": 2,
"name": "Access and Edit",
"description": "Access and Editing Tool for Adobe Experience Manager",
"version": "1.0",
"browser_action": {
"default_icon": "pencil.png"
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"background": {
"scripts": ["eaem.js"]
}
}
3) Add the pencil icon to C:\dev\open-page-in-author-browser-ext\chrome
4) Create file C:\dev\open-page-in-author-browser-ext\chrome\eaem.js and add following code
(function(){
var authorPrefix = 'http://localhost:4502';
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null, function(tab){
var parser = document.createElement('a');
parser.href = tab.url;
var path = "";
if(parser.pathname.indexOf("/cf") == 0){
path = parser.pathname + parser.hash + parser.search;
}else{
path = "/cf#" + parser.pathname + parser.search;
}
path = authorPrefix + path;
chrome.tabs.create({url : path});
});
});
})();
5) Chrome enables only web store extensions (and this extension is not web store worthy :) ); to use this extension use chrome developer mode and load it
6) A small pencil icon should appear on the top right of chrome; open any page on publish in a tab eg. http://localhost:4503/content/geometrixx-outdoors/en/women.html, click on the pencil and chrome opens the same page on author in new tab (a login page if user was not already authenticated)
8) Download code as zip
Develop for Firefox
1) Create a folder C:\dev\open-page-in-author-browser-ext\firefox
2) Create file C:\dev\open-page-in-author-browser-ext\firefox\install.rdf with following xml. Just bragging about yourself :)
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>fake@experience-aem.blogspot.com</em:id>
<em:name>Access and Edit</em:name>
<em:description>Access and Editing Tool for Adobe Experience Manager</em:description>
<em:version>1.0</em:version>
<em:creator>Experience AEM</em:creator>
<em:homepageURL>http://experience-aem.blogspot.com</em:homepageURL>
<em:type>2</em:type>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>4.0</em:minVersion>
<em:maxVersion>14.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
3) Create file C:\dev\open-page-in-author-browser-ext\firefox\chrome.manifest with following content, overlaying the browser chrome for adding your extension pencil button; the extension will be available in eaem folder
content eaem content/ overlay chrome://browser/content/browser.xul chrome://eaem/content/eaem.xul
4) Create file C:\dev\open-page-in-author-browser-ext\firefox\content\pencil.png
5) Create file C:\dev\open-page-in-author-browser-ext\firefox\content\eaem.properties with author hostname property (read in extension JS logic)
author.prefix = http://localhost:4502
6) Create file C:\dev\open-page-in-author-browser-ext\firefox\content\eaem.xul, overlay file assembling the extension (adding pencil, click action etc.)
<?xml version="1.0"?>
<overlay id="eaem-browser-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://eaem/content/eaem.js" />
<stringbundleset id="stringbundleset">
<stringbundle id="eaem-string-bundle"
src="chrome://eaem/content/eaem.properties" />
</stringbundleset>
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="eaem-navbar-button"
class="toolbarbutton-1 chromeclass-toolbar-additional"
label="Access Edit"
image="chrome://eaem/content/pencil.png"
tooltiptext="Access and Editing"
oncommand="ExperienceAEM.AccessAndEditing.open(event)">
</toolbarbutton>
</toolbarpalette>
</overlay>
7) Create file C:\dev\open-page-in-author-browser-ext\firefox\content\eaem.js with necessary logic to open page in new tab
if ("undefined" == typeof(ExperienceAEM)) {
var ExperienceAEM = {};
};
ExperienceAEM.AccessAndEditing = {
init : function () {
var navbar = document.getElementById("nav-bar");
var newset = navbar.currentSet + ',eaem-navbar-button';
navbar.currentSet = newset;
navbar.setAttribute("currentset", newset );
document.persist("nav-bar", "currentset");
},
open: function(aEvent) {
var bundle = document.getElementById("eaem-string-bundle");
if(!bundle){
window.alert("Missing 'eaem.properties'");
return;
}
var hostPrefix = bundle.getString("author.prefix");
if(!hostPrefix){
window.alert("Missing author prefix 'author.prefix' in 'eaem.properties'");
return;
}
var loc = window.content.location;
var path = "";
if(loc.pathname.indexOf("/cf") == 0){
path = loc.pathname + loc.hash + loc.search;
}else{
path = "/cf#" + loc.pathname + loc.search;
}
window.BrowserOpenTab();
window.content.location.href = hostPrefix + path;
}
};
window.addEventListener("load", function(){ ExperienceAEM.AccessAndEditing.init(); }, false);
8) To build the extension, use standard jar command, at C:\dev\open-page-in-author-browser-ext
jar cvf eaem_access_edit.xpi -C firefox .
9) Download the extension as zip
No comments:
Post a Comment