Slack Code Copy Button

在 Slack 的网页版代码块上添加复制按钮
Faça uma pergunta, publique uma avaliação, ou denuncie o script.
Wrap lines
// ==UserScript==
// @name         Slack Code Copy Button
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在 Slack 的网页版代码块上添加复制按钮
// @author       sbill
// @match        https://*.slack.com/*
// @grant        none
// @license MIT
// ==/UserScript==

(function () {
  'use strict'
  // 创建一个观察器,监听 DOM 变化
  const observer = new MutationObserver(mutations => {
    // 当 <pre> 元素插入页面时
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length > 0) {
        // 查找插入的 <pre> 元素
        const pres = mutation.target.querySelectorAll('.c-mrkdwn__pre')
        // 遍历每个 <pre> 并添加复制按钮
        pres.forEach(pre => {
          // 在 <pre> 上添加复制按钮
          if (pre.querySelector('button')) {
            return
          }
          const copyButton = document.createElement('button')
          copyButton.innerText = '复制'
          copyButton.className = 'c-button c-button--primary c-button--small'
          copyButton.style.position = 'absolute'
          copyButton.style.right = 0
          copyButton.style.top = 0
          pre.style.position = 'relative'
          pre.appendChild(copyButton)

          // 点击复制按钮,将 <pre> 内容复制到剪贴板
          copyButton.addEventListener('click', () => {
            const button = pre.querySelector('button')
            pre.removeChild(button)
            const code = pre.innerText
            // 将修复后的文本复制到剪贴板
            navigator.clipboard.writeText(code)
            // 显示成功提示 
            const prompt = document.createElement('div')
            prompt.innerText = '复制成功!'
            prompt.style.position = 'fixed'
            prompt.style.top = '50px'
            prompt.style.right = '50%'
            prompt.style.transform = 'translateX(50%)'
            prompt.style.padding = '10px 20px'
            prompt.style.background = 'grey'
            prompt.style.borderRadius = '4px'
            prompt.style.zIndex = 222
            prompt.style.color = 'lightpink'
            document.body.appendChild(prompt)

            // 2 秒后自动移除提示
            setTimeout(() => {
              document.body.removeChild(prompt)
            }, 2000)
          })
        })
      }
    })
  })

  // 以根元素为监听目标,监听子节点变动
  observer.observe(document.body, {
    childList: true,
    subtree: true
  })
})()