JavaScriptでクリップボードへコピー
はじめに
タイトルとURLが取れたので、次はクリップボードにコピーします。
クリップボードへコピー
調べてみると clipboardへのコピーは document でするみたいですね。
どうやって documentにコピーしたいデータを追加するかなぁと調べたら、そのものの例 Copying text to clipboard with JavaScript – Hacker Noon が見つかりました。document.createElement() ですね。
ポイント
- documet.createElemet で要素にしてからコピー
- position=absolute, left=-9999px で左の見えない場所に配置
- document.getSelection().rangeCount でHTML中を選択してた場合も考慮
JavaScriptに慣れてないせいか、const と var の違いが把握できてないので今度調べてみます。
browser.contextMenus.create({
id: "copyUrlForQiita",
title: "copy url for qiita",
contexts: ["all"]
});
browser.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "copyUrlForQiita") {
var urlForQiita = "[" + tab.title + "](" + tab.url + ")"
copyToClipboard(urlForQiita);
}
});
function copyToClipboard(str) {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected = document.getSelection().rangeCount > 0 ? document
.getSelection().getRangeAt(0) : false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
};
Permissions
上のコードだけだと問題なかったのですが、いろいろ試している間に、
document.execCommand(‘cut’/‘copy’) はユーザー生成の短期的なイベントハンドラーの内部からの
呼び出しでないため拒否されました
が出力されてしまったので、Permissionsの変更が必要でした。manifest.json に clipboardWrite を追加することで動作するようになりました。
"permissions": [
"contextMenus",
"storage",
"tabs",
"clipboardWrite",
"http://*/*"
],
参考
クリップボードとのやりとり - Mozilla | MDN
document.createElement - Web API インターフェイス | MDN
Copying text to clipboard with JavaScript – Hacker Noon
Author And Source
この問題について(JavaScriptでクリップボードへコピー), 我々は、より多くの情報をここで見つけました https://qiita.com/keniooi/items/3049c31ccd3dbccc2670著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .