How to change live page to author editor using browser bookmark?

[djoshinp]

I am using looking to have a Javascript for browser bookmark so, the live page URL converts to the Author editor URL with just a click.  That way it saves time digging in the Sites to find the page.

Can anyone help me with this?

Thank you!

[cshawaus · Accepted solution]

@djoshinp What you need in this case is a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/) which is a bookmark that runs JavaScript. See the below for an example:

javascript\: (() => {
  let pagePath = window.location.pathname.substring(1);
  pagePath = pagePath.replace(/\/$/, '');

  const anchorElement = document.createElement('a');
  anchorElement.href = `http://localhost:4502/editor.html/${pagePath}.html`;
  anchorElement.target = '_blank';

  anchorElement.click();
})();

Be aware that javascript\: is required to inform the browser that it needs to execute JavaScript in the context of this bookmark. Also note that the backslash in javascript\: is only for escaping purposes here. See the link for examples of the correct formatting.

Here is what this does:

1. Takes the current page path and removes the initial forward slash
2. Removes the trailing forward slash
3. Creates a dummy anchor element that opens the editor page in a new tab/window

There are some assumptions here:

1. The page path already contains /content
2. Your author URL is http://localhost:4502

If you need more configuration an extension would be better but that is beyond this forum.

Hope that helps.

[nitesh_kumar]

Hi @djoshinp 

Not sure if you have already explored chrome plugins, there are a lot, you can explore, but one I do remember is this one https://chrome.google.com/webstore/detail/esri-aem-chrome-extension/olnobjdmmkloilfjcflfpkponphjpchi... ,

it does exactly the same thing that you have mentioned in your use case. 

Otherwise, you can refer to the solution provided by @cshawaus.

Hope this helps!

Regards,

Nitesh

[StephenLRouse]

The following instructions are based on Chrome's bookmarking system.  The script provided references a meta tag that contains the content path of the page (e.g.<meta name="aem-content-path" content="/content/mysite/en/mypage">).

1. Click on Bookmarks and then Bookmark Manager in Chrome's main nav menu
2. Make sure "Bookmark Bar" is highlighted in left nav of the page
3. Click 3 dots in top right of the page
4. Click "Add new bookmark".  A bookmark creation form will appear
5. Define a new name for your bookmark in the Name field
6. Place the following script (with any necessary changes to match your environment) into the URL field

javascript:(function()%7Bvar%20aem_content_path%20%3D%20document.querySelector('meta%5Bname%3D%22aem-content-path%22%5D').content%3Bdocument.location.href%3D'https%3A%2F%2Fstgauthor.yourdomain.com%2Feditor.html'%20%2B%20aem_content_path%20%2B%20'.html'%7D)()