SOURCE

function createClickCallback(str, setting) {
    return `(function(button){
    const setting = ${JSON.stringify(setting)}

    function setCopied() {
        button.classList.add("copied")
        button.setAttribute("data-copy-success", setting['copy-success'])
    }

    function resetButton() {
		setTimeout(function () {
            button.classList.remove("copied")
            button.classList.remove("error")
        }, setting['copy-timeout']);
	}

    function onSuccess() {
      setCopied();
      resetButton();
    }

    function onError(error) {
      error && console.error(error);
      button.classList.add("error")
      resetButton();
    }

    function fallbackCopyTextToClipboard(str) {
      var textArea = document.createElement('textarea');
      textArea.value = str

      // Avoid scrolling to bottom
      textArea.style.top = '0';
      textArea.style.left = '0';
      textArea.style.position = 'fixed';

      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();

      try {
        var successful = document.execCommand('copy');
        setTimeout(function () {
          if (successful) onSuccess()
          else onError()
        }, 1);
      } catch (err) {
        setTimeout(function () {
          onError(err)
        }, 1);
      }

      document.body.removeChild(textArea);
    }

    function copyTextToClipboard(str) {
      if (navigator.clipboard) {
        navigator.clipboard.writeText(str)
          .then(onSuccess, function () {
            fallbackCopyTextToClipboard(str);
          });
      } else {
        fallbackCopyTextToClipboard(str);
      }
    }

    copyTextToClipboard(${JSON.stringify(str)})
  })(this)`;
}

const btn = document.querySelector("button")
const codeEL = document.querySelector("code")
btn.setAttribute("onclick", createClickCallback(codeEL.textContent, {
    'copy-success': '复制成功',
    'copy-timeout': 3000,
}))

<pre class="language-js"><code is:raw="" class="language-js"><span class="token comment">// ==UserScript==</span>
<span class="token comment">// @name         CSDN去除收费项、免登录复制、免登录查看需关注的内容、沉浸式阅读</span>
<span class="token comment">// @namespace    http://tampermonkey.net/</span>
<span class="token comment">// @version      2.0</span>
<span class="token comment">// @description  1.CSDN去除无用信息沉浸式阅读  2.免登录复制 3.免登录查看需要关注才能看的内容</span>
<span class="token comment">// @description  更新内容（2023-04-07）==&gt; 1、还原显示付费下载内容  2、删除多余显示项  3、修复部分页面显示问题</span>
<span class="token comment">// @author       Mr.Chen</span>
<span class="token comment">// @match        https://blog.csdn.net/*/article/details/*</span>
<span class="token comment">// @match        https://*.blog.csdn.net/article/details/*</span>
<span class="token comment">// @match        https://so.csdn.net/*</span>
<span class="token comment">// @icon         https://www.google.com/s2/favicons?domain=csdn.net</span>
<span class="token comment">// @grant        GM_addStyle</span>
<span class="token comment">// @grant        unsafeWindow</span>
<span class="token comment">// @run-at       document-end</span>
<span class="token comment">// ==/UserScript==</span>

<span class="token comment">// 如果为详情页则去除无用内容，开起沉浸式阅读</span>
<span class="token function">GM_addStyle</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
        .blog_container_aside,#rightAside,.recommend-box,#treeSkill,#blogExtensionBox,#recommendNps,#toolBarBox,.comment-box-old,.insert-baidu-box,.blog-footer-bottom,.blog-footer-bottom,.comment-box,.template-box,.column-group,#csdn-toolbar,.csdn-side-toolbar,#passportbox,.passport-login-container,.hide-article-box{display:none!important;}
        .article_content{height:auto!important} #content_views pre code{user-select:text !important}
    </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>

<span class="token comment">// 调整主页面大小</span>
document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#mainBox'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token string">'100%'</span>
document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token string">'100%'</span>

document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>userSelect <span class="token operator">=</span> <span class="token string">'auto'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

document
    <span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
        el<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
            <span class="token string">'copy'</span><span class="token punctuation">,</span>
            <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> event<span class="token punctuation">.</span><span class="token function">stopImmediatePropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token boolean">true</span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">)</span>
document
    <span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
        el<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
            <span class="token string">'click'</span><span class="token punctuation">,</span>
            <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> event<span class="token punctuation">.</span><span class="token function">stopImmediatePropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token boolean">true</span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">)</span>
document
    <span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
        el<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
            <span class="token string">'mousedown'</span><span class="token punctuation">,</span>
            <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> event<span class="token punctuation">.</span><span class="token function">stopImmediatePropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token boolean">true</span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">)</span>
document
    <span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
        el<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
            <span class="token string">'mouseup'</span><span class="token punctuation">,</span>
            <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> event<span class="token punctuation">.</span><span class="token function">stopImmediatePropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token boolean">true</span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">)</span></code></pre>

<button class="copy"></button>

:root {
    --vp-c-text-dark-2: rgba(128, 128, 128, 1);
    --vp-code-copy-code-active-text: var(--vp-c-text-dark-2);
    --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.4);

    --vp-code-block-bg: #292b30;
    --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
    --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
}

button{
    border: 0;
    padding: 0;
    font-family: inherit;
    background-color: transparent;
    background-image: none;
}

button.copy:hover{
    opacity: 1;
}
button.copy.copied{
    opacity: 1;
}
button.copy{
    direction: ltr;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: block;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    background-color: var(--vp-code-copy-code-hover-bg);
    opacity: 0;
    cursor: pointer;
    background-image: var(--vp-icon-copy);
    background-position: 50%;
    background-size: 20px;
    background-repeat: no-repeat;
    transition: opacity .4s;
}

button.copied{
    border-radius: 0 4px 4px 0;
    background-color: var(--vp-code-copy-code-hover-bg);
    background-image: var(--vp-icon-copied);
}
button.copied::before{
    position: relative;
    left: -65px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px 0 0 4px;
    width: 64px;
    height: 40px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--vp-code-copy-code-active-text);
    background-color: var(--vp-code-copy-code-hover-bg);
    white-space: nowrap;
    content: attr(data-copy-success);
}