クリップボードにコピーする

ChromeExtensions JavaScript

拡張機能からクリップボードに文字列をコピーしたい。

方法

  • background の body に textarea を追加する。

  • textarea にコピーしたい文字列を設定する。

  • textarea を選択状態にする。

  • "copy" コマンドを実行する。

サンプル

次のような機能を持つ拡張機能をつくってみた：

  • 選択状態で Ctrl+C した場合は、選択範囲をクリップボードにコピーする（ブラウザのデフォルト動作）。

  • 未選択状態で Ctrl+C すると、HTML をクリップボードにコピーする。

  • 未選択状態で Ctrl+X すると、タイトルをクリップボードにコピーする。

Manifest.json

  "background": {
    "scripts": [ "background.js" ]
  },

  "content_scripts": [{
    "matches": [ "*://*/*" ],
    "js": [ "content.js" ]
  }],

content.js

window.addEventListener('keydown', keyevent, true);

function keyevent(event) {
  var isMac = (navigator.platform.indexOf("Mac") != -1);
  if ((!isMac && !event.ctrlKey) || (isMac && ! event.metaKey)) return;

  if (isSelected()) return;

  var txt = '';

  switch (event.keyCode) {
  case 67: //Ctrl+C
    txt = document.all[0].outerHTML;
    break;
  case 88: //Ctrl+X
    txt = document.title
    break;
  default:
    return;
  }

  chrome.runtime.sendMessage({
    txt: txt
  });
}

function isSelected() {
  return (window.getSelection().rangeCount > 1) ? true : false;
}

  • keydown イベントをイベントリスナーに追加する。

    • Mac 以外の場合は ctrlKey 、Mac の場合は metaKey を判定する。

    • 選択状態の場合は何もせず return する（＝デフォルト動作）。

    • event.keyCode を判定する。

      • C キーの場合、txt に HTML を設定する。

      • X キーの場合、txt にタイトルを設定する。

    • background にメッセージを送信する。

background.js

{
  var e = document.createElement('textarea');
  e.id = 'clip';
  document.body.appendChild(e);
}

functtion copyToClip(s) {
  var e = document.getElementById('clip');
  e.value = s;
  e.select();
  document.execCommand("copy");
}

chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {
  copyToClip(request.txt);
});

  • background の body に textarea を追加する。

  • content_script からのメッセージ受信時

    • textarea にコピーしたい文字列を設定する。

    • textarea を選択状態にする。

    • "copy" コマンドを実行する。

参考記事

Safari 拡張機能のソースですが、background に textarea を準備しておいてクリップボードにコピーする仕組みが参考になりました。