JavaScriptによるChrome拡張機能作成: マウスでハイライトしたテキスト範囲を選択できるが、コピーできない

##経緯
Chromeにて拡張機能アイコンをクリックすると、予めマウスのドラッグ操作で選択していたテキスト範囲をコピーするような、シンプルな拡張機能を作成しています。

##質問
その中において、当拡張機能アイコンをクリックすることで選択範囲のテキストをpopup.htmlで表示するところまではできているのですが、クリップボードにコピーできておりません。popup.jsのdocument.execCommand("Copy")とconsole.log()が機能していないような振る舞いです。この2つのコマンドを正常に動作させる、あるいは同等の動作を実現する記述方法を教えていただきたいです。

説明不足な点などございましたら、適宜追記してまいりますので、どうぞよろしくお願い申し上げます。

##ソース

popuphtml
1<!DOCTYPE html>
2<html lang="en">
3    <head>
4        <meta charset="UTF-8">
5        <script src="popup.js"></script>
6        <title></title>
7    </head>
8    <body>
9        <div id="output"></div>
10    </body>
11</html>

popupjs
1chrome.tabs.executeScript(
2  {
3    code: "window.getSelection().toString();",
4  },
5  function (selection) {
6    document.getElementById("output").innerHTML = selection[0];
7    document.execCommand("Copy"); #クリップボードにコピーされない 
8    console.log("Copied!"); #Chrome DevToolsのコンソールに表示されない
9  }
10);

manifestjs
1{
2  "manifest_version": 2,
3  "name": "Select text",
4  "description": "A sample extension to get the selected text",
5  "version": "1.0",
6  "icons": {
7
8  },
9  "browser_action": {
10    "default_popup": "popup.html"
11  },
12  "permissions": [
13    "activeTab",
14    "clipboardWrite",
15    "clipboardRead"
16  ]
17}

miyabi_pudding

2020/11/16 00:58

何をもってコピーされないのでしょうか？ボタンを改めて押した時点で、フォーカスがボタンに移るので、テキスト未選択状態になるかと思うのですが・・・。

fukazume

2020/11/16 01:10

ご指摘いただきありがとうございます！クリップボードの内容が更新されていないことをもって「コピーできていない」と表現いたしました。テキスト選択状態にするにはどのような記述方法があるでしょうか？

miyabi_pudding

2020/11/16 01:13

> テキスト選択状態にするにはどのような記述方法があるでしょうか？ここに関して、一度ご自身で調べてみるとよいかと。その上で、理想の挙動が実装できないなら、質問本文にその旨記載されるといいかと思います。

fukazume

2020/11/16 01:16

ありがとうございました！

miyabi_pudding

2020/11/16 01:18

もし、自分で解決した、って時は、自己解決の投稿をされるといいかと。ただ、なんとなくですが、理想の挙動に行くには、けっこうゴネゴネ処理しないと行けなさそうな気がします。

fukazume

2020/11/16 01:22

はい！window.getSelection().toString();メソッドの前後や「フォーカス」の観点から試行錯誤してみます。ありがとうございました！

行動規範の内容に同意します

回答1件

以前任意の文字列をクリップボードにコピーする拡張機能を作ったのですが、
そのコードを見ると、backgroudで以下のようにしてました。

js
1const textarea = document.createElement("textarea")
2document.body.appendChild(textarea)
3
4textarea.value = "コピーしたい文字列"
5textarea.select()
6
7document.execCommand('copy')