Chrome拡張機能開発　選択中の文字列を取得して、クリップボードにコピーするサンプルコード

選択中の文字列を取得し、クリップボードにコピーする

このサンプルでは、文字列を選択した状態で「右クリック」し、「選択中の文字列をコピー」を押すとその文字列をクリップボードにコピーします。

やっていることは　ctrl+c　と変わりませんが、これを利用することで、取得した文字列を加工したりすることができます。

f:id:karupoimou:20190422053014p:plain — 右クリックメニューの表示

f:id:karupoimou:20190422052529p:plain — デバッグの例

サンプルファイルのダウンロード

GitHub - karupoimou/copy_selected

サンプルコード

manifest.json

{
    "manifest_version": 2,
    "name": "copy_selected",
    "description": "copy_selected",
    "version": "1.0",

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

    "permissions" : [
      "contextMenus",
      "clipboardRead"
    ],

    "icons" : {
      "48" : "icons/icon48.png"
    }
}

background.js

//コンテクストメニュー　右クリック時に出る表示のやつ
chrome.contextMenus.create({
  "title" : "選択中の文字列をコピー",
  "type"  : "normal",
  "contexts" : ["selection"],
  "onclick" : copytext()
});

//選択中の文字列を取得する関数
function copytext(info,tab){
  return function(info,tab){
    var selection_text = info.selectionText;

    console.log(selection_text);      //取得した文字列をデバッグに送る
    saveToClipboard(selection_text);  //取得した文字列をクリップボードにコピーする関数に送る
  }
}

//選択中文字列をクリップボードに入れる
function saveToClipboard(str) {
        var textArea = document.createElement("textarea");

        document.body.appendChild(textArea);

        textArea.value = str;
        textArea.select();
        document.execCommand("copy");

        document.body.removeChild(textArea);
    }