How can Greasemonkey copy the contents of a certain div, to the clipboard?

Question

I am trying to make a script that copies the contents of a certain div, and put it into the clipboard (ready to paste). This div is within a site (Shopify), which I cannot modify.

<ul class="next-list next-list--plain-divided" id="line-item-properties" refresh="line-item-properties">
<li class="type--breakall">
    <div class="next-grid next-grid--compact next-grid--no-outside-padding next-grid--vertically-centered">

        <div class="next-grid__cell">
            <div class="wrappable wrappable--no-spacing">
                <div class="wrappable__item wrappable__item--no-flex">
                    <p class="type--subdued">Custom Text:</p>
                </div>
                <div class="wrappable__item">
                    IWANTTHISTEXT
                </div>
            </div>
        </div>

        <div class="next-grid__cell next-grid__cell--no-flex hide-when-printing">
            <a href="/admin/orders/170903371809/delete_property?line_item_id=332788334625&amp;property_key=Custom+Text"
              class="btn btn--link" data-tg-remote="delete" data-refresh-on-success="line-item-properties"
            >
                <svg class="next-icon next-icon--color-ink-lighter next-icon--size-20">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#delete-minor"></use>
                </svg>
            </a>
        </div>

    </div>
</li>

So I want the area of text that says "IWANTTHISTEXT".

So far I have attempted multiple strategies and come up with nothing! Any help would be appreciated.

Answer 1

You would use GM_setClipboard().

For a static page:

// ==UserScript==
// @name     _AutoClipboard, get item text
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_setClipboard
// ==/UserScript==

var targText = $(".wrappable__item").text ().trim ();

console.log ("Copied to clipboard: ", targText);
GM_setClipboard (targText);

Note that if there is more than one wrappable__item node, it will mash their text all together and return one long string to the clipboard.

---

---

For a dynamic (AJAX-driven) page:

// ==UserScript==
// @name     _AutoClipboard, get item text
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_setClipboard
// ==/UserScript==

waitForKeyElements (".wrappable__item", getNodeText);

function getNodeText (jNode) {
    var targText = jNode.text ().trim ();

    console.log ("Copied to clipboard: ", targText);
    GM_setClipboard (targText);
}

For this, if there is more than one wrappable__item node, the clipboard will only end up with the text for the last one.