いま見ているWebページをScrapboxのリンクとしてクリップボードにコピーするブックマークレット

やりたいこと

promptを出してコピーする手間も削減したい。

できたもの

https://gyazo.com/637e9f897ac05c14652e3f15d049bd37

code:ブックマークレット

javascript:function%20execCopy(e)%7Bconst%20n=document.createElement(%22div%22),t=document.createElement(%22pre%22);t.style.webkitUserSelect=%22auto%22,t.style.userSelect=%22auto%22,n.appendChild(t).textContent=e;const%20o=n.style;o.position=%22fixed%22,o.right=%22200%25%22,document.body.appendChild(n),document.getSelection().selectAllChildren(n);const%20i=document.execCommand(%22copy%22);return%20document.body.removeChild(n),i%7Dfunction%20showToast(e)%7Bconst%20n=document.createElement(%22style%22);n.innerText=%22%5Cn%20%20/*%20The%20snackbar%20-%20position%20it%20at%20the%20top%20and%20in%20the%20middle%20of%20the%20screen%20*/%5Cn%20%20#snackbar%20%7B%5Cn%20%20%20%20visibility:%20hidden;%20/*%20Hidden%20by%20default.%20Visible%20on%20click%20*/%5Cn%20%20%20%20min-width:%20250px;%20/*%20Set%20a%20default%20minimum%20width%20*/%5Cn%20%20%20%20margin-left:%20-125px;%20/*%20Divide%20value%20of%20min-width%20by%202%20*/%5Cn%20%20%20%20background-color:%20#333;%20/*%20Black%20background%20color%20*/%5Cn%20%20%20%20color:%20#fff;%20/*%20White%20text%20color%20*/%5Cn%20%20%20%20text-align:%20center;%20/*%20Centered%20text%20*/%5Cn%20%20%20%20border-radius:%202px;%20/*%20Rounded%20borders%20*/%5Cn%20%20%20%20padding:%2016px;%20/*%20Padding%20*/%5Cn%20%20%20%20position:%20fixed;%20/*%20Sit%20on%20top%20of%20the%20screen%20*/%5Cn%20%20%20%20z-index:%201;%20/*%20Add%20a%20z-index%20if%20needed%20*/%5Cn%20%20%20%20left:%2050%25;%20/*%20Center%20the%20snackbar%20*/%5Cn%20%20%20%20top:%2030px;%20/*%2030px%20from%20the%20top%20*/%5Cn%20%20%7D%5Cn%5Cn%20%20/*%20Show%20the%20snackbar%20when%20clicking%20on%20a%20button%20(class%20added%20with%20JavaScript)%20*/%5Cn%20%20#snackbar.show%20%7B%5Cn%20%20%20%20visibility:%20visible;%20/*%20Show%20the%20snackbar%20*/%5Cn%20%20%20%20/*%20Add%20animation:%20Take%200.5%20seconds%20to%20fade%20in%20and%20out%20the%20snackbar.%5Cn%20%20%20%20However,%20delay%20the%20fade%20out%20process%20for%202.5%20seconds%20*/%5Cn%20%20%20%20-webkit-animation:%20fadein%200.5s,%20fadeout%200.5s%202.5s;%5Cn%20%20%20%20animation:%20fadein%200.5s,%20fadeout%200.5s%202.5s;%5Cn%20%20%7D%5Cn%5Cn%20%20/*%20Animations%20to%20fade%20the%20snackbar%20in%20and%20out%20*/%5Cn%20%20@-webkit-keyframes%20fadein%20%7B%5Cn%20%20%20%20from%20%7Btop:%200;%20opacity:%200;%7D%5Cn%20%20%20%20to%20%7Btop:%2030px;%20opacity:%201;%7D%5Cn%20%20%7D%5Cn%5Cn%20%20@keyframes%20fadein%20%7B%5Cn%20%20%20%20from%20%7Btop:%200;%20opacity:%200;%7D%5Cn%20%20%20%20to%20%7Btop:%2030px;%20opacity:%201;%7D%5Cn%20%20%7D%5Cn%5Cn%20%20@-webkit-keyframes%20fadeout%20%7B%5Cn%20%20%20%20from%20%7Btop:%2030px;%20opacity:%201;%7D%5Cn%20%20%20%20to%20%7Btop:%200;%20opacity:%200;%7D%5Cn%20%20%7D%5Cn%5Cn%20%20@keyframes%20fadeout%20%7B%5Cn%20%20%20%20from%20%7Btop:%2030px;%20opacity:%201;%7D%5Cn%20%20%20%20to%20%7Btop:%200;%20opacity:%200;%7D%5Cn%20%20%7D%5Cn%20%20%22,document.body.appendChild(n);const%20t=document.createElement(%22div%22);t.id=%22snackbar%22,t.innerText=e,document.body.appendChild(t);const%20o=t;o.className=%22show%22,setTimeout(()=%3E%7Bdocument.body.removeChild(o),document.body.removeChild(n)%7D,3e3)%7D(()=%3E%7Bconst%20e=document.title.replace(/%60/g,%22%22);execCopy(%22%22===e?%60%5B$%7Blocation.href%7D%5D%60:%60%5B$%7Be%7D%20$%7Blocation.href%7D%5D%60),showToast(%22Copied!%22)%7D)();

code:警告

document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.

どうやらクリップなどのイベントと通じてではないとcopyが拒否される様子。

元のソースコード

（上記のリンクもこのブックマックーレットで作った）

code:js

function execCopy(string){

const tmp = document.createElement("div");

const pre = document.createElement('pre');

pre.style.webkitUserSelect = 'auto';

pre.style.userSelect = 'auto';

tmp.appendChild(pre).textContent = string;

const s = tmp.style;

s.position = 'fixed';

s.right = '200%';

document.body.appendChild(tmp);

document.getSelection().selectAllChildren(tmp);

const result = document.execCommand("copy");

document.body.removeChild(tmp);

return result;

}

function showToast(message) {

const st = `

/* The snackbar - position it at the top and in the middle of the screen */

visibility: hidden; /* Hidden by default. Visible on click */

min-width: 250px; /* Set a default minimum width */

margin-left: -125px; /* Divide value of min-width by 2 */

text-align: center; /* Centered text */

border-radius: 2px; /* Rounded borders */

padding: 16px; /* Padding */

position: fixed; /* Sit on top of the screen */

z-index: 1; /* Add a z-index if needed */

left: 50%; /* Center the snackbar */

top: 30px; /* 30px from the top */

}

/* Show the snackbar when clicking on a button (class added with JavaScript) */

visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar.

However, delay the fade out process for 2.5 seconds */

-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;

animation: fadein 0.5s, fadeout 0.5s 2.5s;

}

/* Animations to fade the snackbar in and out */

@-webkit-keyframes fadein {

from {top: 0; opacity: 0;}

to {top: 30px; opacity: 1;}

}

@keyframes fadein {

from {top: 0; opacity: 0;}

to {top: 30px; opacity: 1;}

}

@-webkit-keyframes fadeout {

from {top: 30px; opacity: 1;}

to {top: 0; opacity: 0;}

}

@keyframes fadeout {

from {top: 30px; opacity: 1;}

to {top: 0; opacity: 0;}

}

`;

const style = document.createElement('style');

style.innerText = st;

document.body.appendChild(style);

const div = document.createElement('div');

div.id = "snackbar";

div.innerText = message;

document.body.appendChild(div);

// Add the "show" class to DIV

const x = div;

x.className = "show";

// After 3 seconds, remove the show class from DIV

setTimeout(() => {

document.body.removeChild(x);

document.body.removeChild(style);

}, 3000);

}

(() => {

const title = document.title.replace(/`/g, '');

execCopy(scrapboxLink);

showToast("Copied!");

})();