How to add a confluence page menu item with javascript to copy Page title + TinyURL?

[flaimo]

Hi,

inspired by this stackoverflow post I want to put an additional menu item in the menu bar for a confluence page to quickly copy the page title + TinyURL to the users clipboard:

I was able to implement it as a user macro, but can't position it beside the other menu items this way. So the only other way I can think of is, to do it with javascript, which I am not very good at. Maybe someone of you knows how to do this.

So far I have added this custom HTML to At end of the HEAD to include the clipboard.js libary:

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>

<script>
window.onload=function()
  {
    var clipboard = new ClipboardJS('#xxx-copy-url-menu-item');
    clipboard.on("success", function(e)
      {
        console.log(e);
        var button = $(e.trigger);
        window.setTimeout(reset, 5000);
      });
    }
</script>

At end of the BODY I have added to get the TinyURL (got this snipped from another atlassian question here):

<script>
  AJS.toInit(function() {
    var tinyUrl = $("link[rel=shortlink]").attr("href");
  });
</script>

So whats missing is to inject a new menu item at the beginning of the menu bar with this kind of code and also add the page title and TinyURL:

<li class="ajs-button normal">
  <a id="xxx-copy-url-menu-item" rel="nofollow" class="aui-button aui-button-subtle" data-clipboard-text="PAGE_TITLE | TINYURL" title="Kopiert den Seitentitel und die TinyURL in die Zwischenablage zur weiteren Verwendung in Slack">
    <span><span class="aui-icon aui-icon-small aui-iconfont-copy"></span> Name+URL</span>
  </a>
</li>

This is where I am struggling.

[flaimo · Accepted solution]

OK, with a lot of googeling I was able to get the desired result:

<script>
AJS.toInit(function() {
var tinyUrl = $("link[rel=shortlink]").attr("href");
AJS.$('#navigation ul').prepend('<li class="ajs-button normal"><a id="xxx-copy-url-menu-item" rel="nofollow" class="aui-button aui-button-subtle" data-clipboard-text=":confluence: _' + AJS.params.pageTitle + '_ | ' + tinyUrl + '" title="Kopiert den Seitentitel und die TinyURL in die Zwischenablage zur weiteren Verwendung in Slack"><span><span class="aui-icon aui-icon-small aui-iconfont-copy"></span> Name+URL</span></a></li>');
});

AJS.$(document).ready( function() {
AJS.$("#xxx-copy-url-menu-item").click(function() {
var myFlag = AJS.flag({
type: 'info',
body: 'Titel + TinyURL erfolgreich in Zwischenablage kopiert',
});
setTimeout(function () { myFlag.close(); }, 1500);
});
});
</script>