web-dev-qa-db-ja.com

Chrome Extensionでクリップボードにコピー

Googleの拡張機能を作成していますChromeと私はひっかかりました。

ポップアップでクリックすると、読み取り専用のテキストエリアのコンテンツをクリップボードにコピーする必要があります。誰もが純粋なJavascriptでFlashなしでこれを実行する最良の方法を知っていますか？また、拡張機能にjQueryがロードされている場合は、それが役立ちます。私の現在の（動作しない）コードは...

function copyHTMLCB() {
$('#lb_html').select();
$('#lb_html').focus();
textRange = document.lb_html_frm.lb_html.createTextRange();
textRange.execCommand("RemoveFormat");
textRange.execCommand("Copy");
alert("HTML has been copied to your clipboard."); }
javascriptclipboardgoogle-chrome-extension
47
Kyle Ross

Experimental Clipboard API を使用してクリップボードにコピーできますが、ブラウザのdevブランチでのみ使用でき、デフォルトでは有効になっていません（ 詳細 ）。

5
serg

すべての功績はjoelptにありますが、jQueryなしで純粋なjavascriptで動作するために他の誰かがこれを必要とする場合（私はそうしました）、ここに彼のソリューションの適応があります：

function copyTextToClipboard(text) {
  //Create a textbox field where we can insert text to. 
  var copyFrom = document.createElement("textarea");

  //Set the text content to be the text you wished to copy.
  copyFrom.textContent = text;

  //Append the textbox field into the body as a child. 
  //"execCommand()" only works when there exists selected text, and the text is inside 
  //document.body (meaning the text is part of a valid rendered HTML element).
  document.body.appendChild(copyFrom);

  //Select all the text!
  copyFrom.select();

  //Execute command
  document.execCommand('copy');

  //(Optional) De-select the text using blur(). 
  copyFrom.blur();

  //Remove the textbox field from the document.body, so no other JavaScript nor 
  //other elements can get access to this.
  document.body.removeChild(copyFrom);
}
42
Jeff Gran

コピーされたデータのMIMEタイプを指定できるため、次の方法が最適です。

copy: function(str, mimeType) {
  document.oncopy = function(event) {
    event.clipboardData.setData(mimeType, str);
    event.preventDefault();
  };
  document.execCommand("copy", false, null);
}
40
gjuggler

この単純な関数を使用して、任意のプレーンテキストをクリップボードにコピーしています（Chromeのみ、jQueryを使用）：

// Copy provided text to the clipboard.
function copyTextToClipboard(text) {
    var copyFrom = $('<textarea/>');
    copyFrom.text(text);
    $('body').append(copyFrom);
    copyFrom.select();
    document.execCommand('copy');
    copyFrom.remove();
}

// Usage example
copyTextToClipboard('This text will be copied to the clipboard.');

高速のappend-select-copy-removeシーケンスにより、textareaを非表示にする必要も、特定のCSS /属性を指定する必要もないようです。少なくとも私のマシンでは、Chromeは非常に大きなテキストのチャンクであっても、削除される前に画面にレンダリングしません。

これはのみ Chrome拡張機能/アプリ内で動作します。v2manifest.jsonを使用している場合は、「clipboardWrite」権限を宣言する必要があります。アプリには必須であり、拡張機能には推奨されます。

21
joelpt

execCommand("Copy")を使用して読み取り専用のテキストをコピーすることはできません。編集可能なテキスト領域である必要があります。解決策は、テキスト入力要素を作成し、そこからテキストをコピーすることです。残念ながら、display: noneまたはvisibility: hiddenを使用してその要素を非表示にすることはできません。選択/コピーコマンドが機能しなくなるためです。ただし、負のマージンを使用して「非表示」にすることができます。 Chrome短いURLを取得する拡張ポップアップ。 ：

document.body.innerHTML = '<p><a href="'+shortlink+'" target="_blank" >'+shortlink+'</a><form style="margin-top: -35px; margin-left: -500px;"><input type="text" id="shortlink" value="'+shortlink+'"></form></p>'
document.getElementById("shortlink").select()
document.execCommand("Copy")
3
atomicules

Javascriptには、OSとの対話を妨げるセキュリティ制限があることをどこかで読みました。過去にZeroClipboardで成功しました（ http://code.google.com/p/zeroclipboard/ ）が、Flashを使用しています。 Bitly Webサイトでは、これを非常に効果的に使用しています。 http://bit.ly/

1
pinksy

Javascriptのみを使用して要素からテキストをコピーしなければならないという同様の問題がありました。興味がある人のために、ここでその問題の解決策を追加します。このソリューションは、textareaを含む多くのHTML要素に対して機能します。

HTML：

    <textarea id="text-to-copy">This is the text I want to copy</textarea>
    <span id="span-text-to-copy">This is the text I want to copy</span>

Javascript：

let textElement = document.getElementById("text-to-copy");

//remove selection of text before copying. We can also call this after copying
window.getSelection().removeAllRanges();

//create a Range object
let range = document.createRange();

//set the Range to contain a text node.
range.selectNode(textElement);

//Select the text node
window.getSelection().addRange(range);

try {
    //copy text
    document.execCommand('copy');
} catch(err) {
    console.log("Not able to copy ");
}

たとえば、span要素をコピーしたい場合は、そのテキストノードを取得し、range.selectNode（）のパラメーターとして使用して、そのテキストを選択できることに注意してください。

let elementSpan = document.getElementById("span-text-to-copy");
let textNode = elementSpan.childNodes[0];
0
jakobinn