Posted at

Chrome Extension で content_scripts から clipboard を使う

More than 5 years have passed since last update.

Chrome Extension を作っていて、content_scripts からテキストをクリップボードに保存する方法を調べるのに時間がかかったのでメモ


制約とか


  • clipboard にコピーするためには、permissions: ["clipboardRead"] が必要

  • clipboard にコピーするためには、document.execCommand('copy')Event Page で実行する必要がある


  • document.execCommand('copy') は textarea など特定のエレメントのみしかコピー出来ない

これらの決まり事を守って実装


コード例

この例では、

1. コピーするテキストをメッセージとしてコンテントスクリプトから Event Page に送信

2. Event Page 側のリスナーで受信した時に、copy 用のフォームを作成

3. document.execCommand('copy') を実行


manifest.json

...

"permissions":["clipboardRead"],
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"content_scripts": [{
"js": ["extension.js"]
}],
...


extension.js

chrome.runtime.sendMessage({

text: "text to be inserted to clipboard"
});


background.js

function saveToClipboard(str) {

// copy 用に textareaを作る
var textArea = document.createElement("textarea");
textArea.style.cssText = "position:absolute;left:-100%";

document.body.appendChild(textArea);

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

document.body.removeChild(textArea);
}

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
saveToClipboard(request.text);
});



実際に動いているコード

Google Code Jam のソースコードプレビュー拡張 Code Jam Tasting

https://github.com/ororog/CodeJamTasting


参考にした情報

http://zentoo.hatenablog.com/entry/2014/01/26/200914

ここで Event Page からクリップボードにコピーできることが分かったが、そのためにはコンテントスクリプトからテキストを渡さなければいけないので

http://stackoverflow.com/questions/22120202/how-to-get-event-page-from-content-script

テキストの渡し方はここを参考にした