How to copy to the clipboard from a Javascript bookmarklet without external libraries?

Question

This question is different from the other questions in SO concerning copying to the clipboard, as I want to run a function in a bookmarklet and then copy that result to the clipboard. And, is this possible without external libraries and do it within the bookmarklet Javascript?

The bookmarklet below creates a HTML link from the current page, and then opens a new browser tab and puts the HTML link into a text area that can be copied with the keyboard.

But how would I skip that step of opening the window and copying, but go directly to the clipboard? By using document.execCommand('copy')? Other method? Is it possible to do this without external libraries and do it with bookmarklet Javascript?

Bookmarklet that creates the page link in a new tab:

javascript:function htmlEscape(s){s=s.replace(/&/g,'&');s=s.replace(/>/g,'>');
s=s.replace(/</g,'<');return s;} function linkEscape(s){s=s.replace(/&/g,'&');
s=s.replace(/"/,'"');return s} h = '<a href="' + linkEscape(location.href) + '" target="_blank">
<span class="tooltip" title="' + htmlEscape(document.title) + '">' + htmlEscape(document.title)
 + '</span></a>'; with(window.open().document){write(h+'<form name=f>
<textarea  name=a rows=5 cols=80 wrap=hard>'+htmlEscape(h)+'</textarea></form>'); 
close(); f.a.select(); } void 0

I can see the part that generates the HTML as, it appears, in a variable called h:

javascript:function htmlEscape(s){s=s.replace(/&/g,'&');s=s.replace(/>/g,'>');
s=s.replace(/</g,'<');return s;} function linkEscape(s){s=s.replace(/&/g,'&');
s=s.replace(/"/,'"');return s} h =

I can see the part of the function that opens the new window:

with(window.open().document){write(h+'<form name=f><textarea  name=a rows=5 
cols=80 wrap=hard>'+htmlEscape(h)+'</textarea></form>'); close(); f.a.select(); } void 0

How do I write the contents of function - the HTML link - directly to the clipboard?

Answer 1

The question Copy text to clipboard from bookmarklet did not specify whether external libraries were allowed, and all of the existing answers required external libraries.

The additional constraint of wanting to do this without external libraries requires a different approach. I've provided the answer below on the other question as well, but it applies to this scenario as well, since it does not use external libraries.

There is a nice little bookmarket in Github Gist that does the core of what you want -- copying to the clipboard. It does not use any external libraries, which I think of as an advantage.

As written, it copies some static text, but toward the bottom it talks about adapting it to other uses, such as copying the page title.

The plain vanilla version worked very well for me in Chrome 61 with no modifications. But make sure you read the comments; some people have suggestions on getting it to work in other browsers and scenarios.

Here is the code that I tested, already minified and ready to turn into a bookmarklet:

javascript:!function(a){var b=document.createElement("textarea"),c=document.getSelection();b.textContent=a,document.body.appendChild(b),c.removeAllRanges(),b.select(),document.execCommand("copy"),c.removeAllRanges(),document.body.removeChild(b)}("Text To Copy");

Gist has the pre-minified code as well.

Answer 2

Yes, use navigator.clipboard.writeText().

The following bookmarklet, for instance, copies to clipboard a Youtube video's channel upload list:

javascript:navigator.clipboard.writeText(location.href+'&list='+document.querySelector("#text%20>%20a").href.replace('https://www.youtube.com/channel/UC','UU'))