Greasemonkey 如何将某个 div 的内容复制到剪贴板？答案

【问题标题】：How can Greasemonkey copy the contents of a certain div, to the clipboard?Greasemonkey 如何将某个 div 的内容复制到剪贴板？
【发布时间】：2017-11-14 11:03:46
【问题描述】：

我正在尝试制作一个复制某个 div 内容的脚本，并将其放入剪贴板（准备粘贴）。此 div 位于我无法修改的网站 (Shopify) 中。

<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>

所以我想要显示“IWANTTHISTEXT”的文本区域。

到目前为止，我尝试了多种策略，但一无所获！任何帮助将不胜感激。

【问题讨论】：

标签： javascript greasemonkey tampermonkey

【解决方案1】：

你会使用GM_setClipboard()。

对于静态页面：

// ==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);

请注意，如果有多个wrappable__item 节点，它会将它们的文本混合在一起并将一个长字符串返回到剪贴板。

对于动态（AJAX 驱动）页面：

// ==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);
}

为此，如果有多个wrappable__item 节点，剪贴板将仅以最后一个的文本结束。

【讨论】：