Reason

Because I'm too lazy, I don't want to drag a long string of mouse in the browser every time, and then copy it in command+c, so I want to copy it quickly. Usually there are many cases of double-click or triple Click to select a copy, so I decided to implement an oil monkey script, so I can play easily

Realization

(function () {
    'use strict';
    window.__copy_text_to_clipboard__ = true;
    // window.__copy_text_to_clipboard__ === true;
    // iframe.contentWindow.__copy_text_to_clipboard__ === undefined
    function copyToClipboard(str) {
        const textAreaElement = document.createElement('textarea');
        const iframe = this.__copy_text_to_clipboard__ ? document.createElement('iframe') : textAreaElement;
        iframe.style.display = 'none';
        textAreaElement.value = str;
        document.body.appendChild(iframe);
        if (this.__copy_text_to_clipboard__) {
            iframe.contentDocument.body.append(textAreaElement)
        }
        textAreaElement.select();
        document.execCommand('copy');
        document.body.removeChild(iframe);
    }

    function mouseHandle(event) {
        const detail = event.detail;
        const text = this.getSelection().toString();
        // if the text is empty or click event neither double click nor triple click
        if (!text.trim().length || (detail !== 2 && detail !== 3)) {
            return;
        }
        copyToClipboard.call(this, text)
    }

    // notice the dynamic iframes are not queried
    const iframes = document.querySelectorAll('iframe');

    [...iframes].forEach(iframe => {

        iframe.onload = function () {
            const contentWindow = iframe.contentWindow;
            const contentDocument = iframe.contentDocument;
            // handle iframe copy
            contentDocument.addEventListener('click', mouseHandle.bind(contentWindow));
        }

    })

    document.addEventListener('click', mouseHandle.bind(window));

})();

The implementation is very simple. When selecting, you can get the selected text through window.getSelection, and then execute document.execCommand('copy ') to copy it to the clipboard

There is a judgment in copyToClipboard, so why is it?

The reason is that I have obsessive-compulsive disorder. If I don't use iframe, just using textarea will cause the selected text to lose focus (the selected text is not highlighted), so I use iframe

In an ideal situation, you don't need this judgment. In any case, you can use iframe to copy, but the problem arises. Iframe will not be copied to the clipboard when you select it, so you need to use textarea when you select it under iframe

Because iframe is not in the current document, the highlight selected by iframe will not be out of focus due to textare.select()

Online demo (to install the oil monkey plug-in)

gist address

Just double click the text you want to copy or click three times to select a long string of numbers to copy to the clipboard