index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    body {
      background-color: var(--figma-color-bg);
      color: var(--figma-color-text);
      font-family: monospace;
    }
    #app {
      white-space: pre;
    }
  </style>

  <div id="app"></div>
  <script>

    function makeError () {
      return new DOMException('The request is not allowed', 'NotAllowedError')
    }

    async function copyClipboardApi (text) {
      // Use the Async Clipboard API when available. Requires a secure browsing
      // context (i.e. HTTPS)
      if (!navigator.clipboard) {
        throw makeError()
      }
      return navigator.clipboard.writeText(text)
    }

    async function copyExecCommand (text) {
      // Put the text to copy into a <span>
      const span = document.createElement('span')
      span.textContent = text

      // Preserve consecutive spaces and newlines
      span.style.whiteSpace = 'pre'
      span.style.webkitUserSelect = 'auto'
      span.style.userSelect = 'all'

      // Add the <span> to the page
      document.body.appendChild(span)

      // Make a selection object representing the range of text selected by the user
      const selection = window.getSelection()
      const range = window.document.createRange()
      selection.removeAllRanges()
      range.selectNode(span)
      selection.addRange(range)

      // Copy text to the clipboard
      let success = false
      try {
        success = window.document.execCommand('copy')
      } finally {
        // Cleanup
        selection.removeAllRanges()
        window.document.body.removeChild(span)
      }

      if (!success) throw makeError()
    }

    async function clipboardCopy (text) {
      try {
        await copyClipboardApi(text)
      } catch (err) {
        // ...Otherwise, use document.execCommand() fallback
        try {
          await copyExecCommand(text)
        } catch (err2) {
          throw (err2 || err || makeError())
        }
      }
    }


    // my code


    const appElem = document.querySelector("#app")

    appElem.addEventListener("click", () => {
      // Select everything and try to copy again
      let success = false
      const selection = window.getSelection()
      const range = document.createRange()
      range.selectNodeContents(appElem)
      selection.removeAllRanges()
      selection.addRange(range)
      success = document.execCommand("copy")
      
      if (success) {
        parent.postMessage({ pluginMessage: { type: 'copy-success' } }, '*')
      }
    })

    onmessage = async (event) => {
      if (event && event.data && event.data.pluginMessage) {
        const json = event.data.pluginMessage

        appElem.innerText = json
        const suc = await copyToClipBoard(json)

        if (suc) {
          parent.postMessage({ pluginMessage: { type: 'copy-success' } }, '*')
        }
        else {
          parent.postMessage({ pluginMessage: { type: 'copy-fail' } }, '*')
        }
      }
    }

    async function copyToClipBoard(text) {
      let sucCopy = false
      try {
        await clipboardCopy(text)
        sucCopy = true
      }
      catch(e) {}
      return sucCopy
    }


  </script>
</body>
</html>