How to change live page to author editor using browser bookmark? | Community
Skip to main content
D
djoshinp
January 10, 2023
Solved

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

  • January 10, 2023
  • 3 replies
  • 2204 views

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by cshawaus

@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.

3 replies

cshawaus
cshawausAccepted solution
Level 2
January 11, 2023

@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-1
    Adobe Employee
    nitesh_kumar-1Adobe Employee
    Adobe Employee
    January 11, 2023

    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/related ,

    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

     

      D
      DeblinaMu
      March 4, 2024

      I tried with this extension. Its not working, Can u pls connect with me here https://www.linkedin.com/in/deblina-mukherjee-b5359a13b/

      S
      StephenLRouse
      January 11, 2023

      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&colon;(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)()

       

        D
        DeblinaMu
        March 4, 2024

        I tried, but there is an error. Can u pls connect with me on linkedin https://www.linkedin.com/in/deblina-mukherjee-b5359a13b/

        Terms & ConditionsAccessibility statement

        Loading footer...