Copy button

Copy button for code

// ==UserScript==
// @name         Copy button
// @namespace    http://shikimori.me/
// @description  Copy button for code
// @version      1.0
// @autor        pirate-
// @match        *://shikimori.tld/*
// @match        *://shikimori.one/*
// @match        *://shikimori.me/*
// @grant        none
// ==/UserScript==

function addCopyButtons() {
  const codeBlocks = document.getElementsByClassName('b-code-v2');

  for (let i = 0; i < codeBlocks.length; i++) {
    const codeBlock = codeBlocks[i];
    const codeElement = codeBlock.querySelector('code');

    if (!codeBlock.querySelector('button')) {
      const copyButton = document.createElement('button');
      copyButton.type = 'button';
      copyButton.innerHTML = '<span class="mdi mdi-content-copy"></span>';
      copyButton.classList.add('copy');

      copyButton.addEventListener('click', function () {
        const codeText = codeElement.textContent;

        const textarea = document.createElement('textarea');
        textarea.value = codeText;

        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);

        copyButton.innerHTML = '<span class="mdi mdi-check"></span>';
        copyButton.classList.add('copied');

        setTimeout(() => {
          copyButton.innerHTML = '<span class="mdi mdi-content-copy"></span>';
          copyButton.classList.remove('copied');
        }, 2000);
      });

      codeBlock.insertBefore(copyButton, codeElement);
    }
  }
}

function checkAndAddCopyButtons() {
  if (document.readyState === 'complete') {
    addCopyButtons();
  }
}

setInterval(checkAndAddCopyButtons, 1000);

const style = document.createElement('style');
style.innerHTML = `
.copied {
  color: #44de9b !important;
}

pre.b-code-v2 code {
  display: block;
  clear: both;
}
.copy {
  float: right;
}
.b-code-v2:before {
  left: 8px;
  right: inherit;
}
.copy span {
  font-size: 16px;
  background: #1b1b1b;
  padding: 2px 5px;
  border-radius: 3px;
}

code.b-code_inline {
    padding: 0 4px;
    color: rgb(221, 17, 68);
    background-color: rgb(247, 247, 249);
    border: 1px solid rgb(225, 225, 232);
    border-radius: 3px;
}


.b-code-v2 { background: black;  border-radius: 5px; } .hljs-tag { color: #62c8f3 } .hljs-variable,.hljs-template-variable { color: #ade5fc } .hljs-bullet { color: #a2fca2 } .hljs-type,.hljs-title,.hljs-section,.hljs-quote,.hljs-builtin-name { color: #ffa } .hljs-symbol,.hljs-bullet { color: #d36363 } .hljs-keyword,.hljs-literal { color: #b3c4df } .hljs-code { color: #888 } .hljs-regexp,.hljs-link { color: #c6b4f0 } .hljs-deletion { background-color: #fc9b9b; color: #333 } .hljs-addition { background-color: #a2fca2; color: #333 } .hljs-selector-tag { color: red } .hljs-selector-id { color: #fad430 } .hljs-selector-class { color: #fff500; } .hljs-selector-pseudo,.hljs-meta { color: #a982ff !important; } .hljs-attribute { color: #37c6e9; } .hljs-built_in { color: #89ddff } .hljs-number { color: #ff8400 } .hljs-string { color: #00ffa0 } .hljs-comment { color:#6b6b6b;}.b-code-v2:before {  background: #1b1b1b; }code#code_0 { color: #6f6f6f; }
`;
document.head.appendChild(style);

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.4.47/css/materialdesignicons.min.css';
link.integrity = 'sha512-/k658G6UsCvbkGRB3vPXpsPHgWeduJwiWGPCGS14IQw3xpr63AEMdA8nMYG2gmYkXitQxDTn6iiK/2fD4T87qA==';
link.crossOrigin = 'anonymous';
link.referrerPolicy = 'no-referrer';
document.head.appendChild(link);