[xwiki-users] Integrate clipboard.js into XWiki application

Hi, I'm trying to implement a basic password manager as an XWiki application. I have short text fields for username and password. In view mode the password is replaced by ********** to hide it from prying eyes. Now I'd like to have a button next to the username and password fields for copying the values to the clipboard. I found two sources: 1. http://extensions.xwiki.org/xwiki/bin/view/Extension/Cross-browser+JavaScri… 2. https://clipboardjs.com/ As the Wiki entry (1) is rather old I tried to replace it by (2) but I'm not sure how to insert the code exactly. I uploaded the clipboard.min.js as an attachment to the Application code page. My Application sheet looks like this: {{velocity}} {{html wiki="true"}} #set ($discard = $doc.use('XPass.Code.XPassClass')) #set($theSharedPanel = $xwiki.getDocument('XPass.Code')) <script src="$theSharedPanel.getAttachmentURL('clipboard.min.js')"></script> (% class="xform" %) ((( <script> var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script> ; <label for="XPass.Code.XPassClass_0_sTxtName">$escapetool.xml($doc.displayPrettyName('sTxtName', false, false))</label> : $doc.display('sTxtName') ; <label for="XPass.Code.XPassClass_0_sListCategory">$escapetool.xml($doc.displayPrettyName('sListCategory', false, false))</label> : $doc.display('sListCategory') ; <label for="XPass.Code.XPassClass_0_sTxtURL">$escapetool.xml($doc.displayPrettyName('sTxtURL', false, false))</label> : $doc.display('sTxtURL') ; <label for="XPass.Code.XPassClass_0_lTxtDesc">$escapetool.xml($doc.displayPrettyName('lTxtDesc', false, false))</label> : $doc.display('lTxtDesc') ; <label for="XPass.Code.XPassClass_0_sTxtUser">$escapetool.xml($doc.displayPrettyName('sTxtUser', false, false))</label> : $doc.display('sTxtUser') ; <label for="XPass.Code.XPassClass_0_sTxtPassword">$escapetool.xml($doc.displayPrettyName('sTxtPassword', false, false))</label> : #if ($context.display == 'edit') $doc.display('sTxtPassword') #else ~*~*~*~*~*~*~*~*~*~* #end <button class="btn" data-clipboard-target="$doc.display('sTxtPassword')"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button> ))) {{/html}} {{/velocity}} Now then pressing the "Copy to clipboard" button the clipboard is not updated and the console shows: "ReferenceError: Clipboard is not defined" I'm not sure where to place the scripts to make it work so mybe someone can enlighten me. Regards, Dennis