「クリップボード」の記事 - Crieit

(Chrome拡張機能) navigator.clipboard を利用したクリップボードへの貼り付けが httpサイトでは失敗する

2022-01-04T23:14:56+09:00

先日作成した Chrome拡張機能が httpサイトでは上手く動かないことに気付いたので修正しました。

経緯

早速作成した Chrome拡張機能を運用し始めたのですが、一部のサイトでは次のエラーを出力して上手く動かないことが分かりました。

Unchecked runtime.lastError: The message port closed before a response was received.

原因

いくつかのサイトを試験した結果、 httpサイトではこのエラーが出力されることが分かりました。

そこで調べてみると……

WebExtension の場合、clipboardRead や clipboardWrite パーミッションを要求することで clipboard.readText() や clipboard.writeText() を使うことができます。HTTPサイトに適用されたコンテンツスクリプトは、Clipboard オブジェクトにアクセスすることはできません。

Clipboard - Web API | MDN

ビンゴ。 httpサイトの Content Script では navigator.clipboard へアクセスできないようです。

対処

navigator.clipboard へアクセスできないとなると、手っ取り早いのは document.execCommand('copy') によるクリップぼ度貼り付けです。

今回は httpサイトという基本レガシーと想定される環境への対処なので、 document.execCommand('copy') で妥協しておきますかね……という感じです。

chain.js

-            chrome.tabs.sendMessage(tab.id, clipText, function(response) {
-                console.log(response.value);
+            chrome.tabs.sendMessage(
+                tab.id,
+                {
+                    text: clipText,
+                    url: tab.url,
+                },
+                function(response) {
+                    console.log(response.value);

chrome.tabs.sendMessage() の第二引数は元はシンプルにクリップボードに貼り付けたいテキストを投げていましたが、今回は http:// か https:// かの判定をしたかったのでURLのみのシンプルなテキストも送ることにしました。そこで、Stringだった引数をObjectに変更。

smith.js

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
     // メッセージとして送信されたクリップボードに貼り付けたいテキストをそのままレスポンスに設定して返却
-    navigator.clipboard.writeText(request);
+    if(request.url.toLowerCase().startsWith('https://')) {
+        navigator.clipboard.writeText(request.text);
+    }
+    else {
+        const inputID = 'chromeExtension-emeraldIsle-clipText';
+        console.log(document.querySelector(`#${inputID}`))
+        if(document.querySelector(`#${inputID}`) === null) {
+            const $input = document.createElement('input');
+            $input.setAttribute('type', 'text');
+            $input.setAttribute('id', inputID);
+            $input.setAttribute('style', 'position: absolute; left: -100vw; top: 0');
+            document.body.appendChild($input);
+        }
+        const $inputDom = document.querySelector(`#${inputID}`);
+        $inputDom.value = request.text;
+        $inputDom.select();
+        document.execCommand('copy');
+    }
     sendResponse({
-        value: request,
+        value: request.text,
     });
+    return true;
 });

content Scripts 側を大改造。元々は navigator.clipboard.writeText(request); のみのシンプルな内容でしたが、次のように処理を変更。

URLに https:// (大文字小文字区別せず) で始まるかどうかを判定
始まるならば今まで通りの navigator.clipboard.writeText(request.text); で貼り付け
始まらないならば次の処理を実行
- もし指定したIDの要素が存在しないならば
  - ID付与、画面外領域に input要素を追加
- 再度指定したIDの input要素を取得、値にクリップボードに貼り付けたいリンク文字列をセット
- document.execCommand('copy') でクリップボードにコピー

これで httpサイトでもリンク文字列をクリップボードに貼り付けられるようになりました。

参考

Unchecked runtime.lastError: The message port closed before a response was received.

navigator.clipboard へのアクセス

document.execCommand

JavaScript

DOM要素の有無

JavaScriptで要素が存在するかtrue\/falseで知りたい時どうするか？ - Qiita

テキストボックスに値をセット

JavaScriptで要素が存在するかtrue\/falseで知りたい時どうするか？ - Qiita

要素に属性をセット

any だった。

(未使用) html-loader

一瞬 Background Page を作ってそのテキストボックスにいったん貼り付けて、その値を取得する方法を考えました。

今回 Webpack 使用だったので html-loader 案件か、と思いましたが、回避しました。

VSCode からテキストをコピーする際に「書式なし」をデフォルトにする

2021-05-29T15:25:05+09:00

VSCode 上のテキストをコピーして Word に貼り付けたら、背景色なども一緒に付いてきてしまったので「書式なし」をデフォルトに設定します。

現象

例えば、以下のようなテキストを VSCode からコピーします。

それを、 Word 等に貼り付けます。

すると、ご覧の通り背景色や文字色、フォントなどの書式も一緒に貼り付けてしまいます。

このままだと困るので、 VSCode からコピーする際に「書式なし」でコピーするように設定を変更します。

対処

VSCode の設定を編集します。

「ファイル」→「ユーザー設定」→「設定」と進んで、「copy with」と検索すれば、 Editor: Copy With Syntax Highlighting の項目が表示されるはず。

そのチェックを外し、 VSCode を再起動。これでコピー時に書式を引き継がないようになります。

ちなみに、 settings.json では以下のキーと値を追加すればOK。

{
    // 略
    "editor.copyWithSyntaxHighlighting": false
    // 略
}

対処後、プレーンな状態でテキストを貼り付けることができるようになりました。

参考

【WPF】右クリックメニューでデータグリッドの内容をコピーする

2019-07-16T10:10:15+09:00

おはようございます。

データグリッドで、
編集まではさせないけど内容のコピーが出来ると便利なシーンってありますよね。

そんな時は、右クリックでコンテキストメニューを表示して操作させるのがいいかもしれません。
ということでやってみました。

ついでに、クリップボードの内容を貼り付ける操作と、行のコピーも実装してみます。

プログラムは下記の記事のものを流用します。
【WPF】WebBrowser に PDFファイルを表示する

画面の修正

まずは、データグリッドにコンテキストメニューを追加します。

MainWindow.xaml

プログラムの修正

コピーメソッドの追加

次のようにメソッドを実装します。
MainWindow.xaml.cs

        /// 
        /// 名前をクリップボードにコピーします.
        /// 
        /// 
        /// 
        private void ctm_namecopy_Click(object sender, RoutedEventArgs e)
        {
            // 選択中のデータを取得
            CatModel cat = this.dataGrid.SelectedItem as CatModel;
            if (cat != null)
            {
                try
                {
                    // クリップボードにコピー
                    Clipboard.SetText(cat.Name);
                }
                catch (Exception ex)
                {
                }
            }
        }

データベース上で選択された行の、名前列をクリップボードにコピーします。
簡単なものですね。

貼り付けメソッドの追加

次のようにメソッドを実装します。
MainWindow.xaml.cs

        /// 
        /// クリップボードの名前を貼り付け
        /// 
        /// 
        /// 
        private void ctm_namepaste_Click(object sender, RoutedEventArgs e)
        {
            // 選択中のデータを取得
            CatModel cat = this.dataGrid.SelectedItem as CatModel;
            if (cat != null)
            {
                String name = Clipboard.GetText();
                cat.Name = name;
                this.dataGrid.Items.Refresh();
            }
        }

選択された行の名前列の内容をクリップボードの内容で上書きします。
リフレッシュメソッドを呼び出すことで内容が即座に反映されます。

行コピーメソッドの追加

次のようにメソッドを実装します。
MainWindow.xaml.cs

        /// 
        /// 行をカンマ区切り文字列にしてクリップボードにコピーします.
        /// 
        /// 
        /// 
        private void ctm_rowcopy_Click(object sender, RoutedEventArgs e)
        {
            // 選択中のデータを取得
            CatModel cat = this.dataGrid.SelectedItem as CatModel;
            if (cat != null)
            {
                // データをCSV形式に変換
                String delmiter = ",";
                StringBuilder sb = new StringBuilder();
                sb.Append(cat.No).Append(delmiter);
                sb.Append(cat.Name).Append(delmiter);
                sb.Append(cat.Sex).Append(delmiter);
                sb.Append(cat.Age).Append(delmiter);

                KindConverter kindConverter = new KindConverter();
                sb.Append(kindConverter.Convert(cat.Kind, null,null,null)).Append(delmiter);

                sb.Append(cat.Favorite);
                try
                {
                    // クリップボードにコピー
                    Clipboard.SetText(sb.ToString());
                }
                catch (Exception ex)
                {
                }
            }
        }

こちらはコピーの応用で、選択された行の内容をカンマ区切りに編集し
クリップボードにコピーします。

まとめ

思っていたより簡単に実装できました。
クライアントソフトならではの手軽さですかね。
（WEBはセキュリティとかの問題でコピーとかが意外に面倒）

コンテキストメニュー自体は階層も持たすことができますし、
色々なことに利用できそうですね。
何か思いついたらやってみようと思います。

ではでは。

「クリップボード」の記事 - Crieit

(Chrome拡張機能) navigator.clipboard を利用したクリップボードへの貼り付けが httpサイト では失敗する

VSCode からテキストをコピーする際に「書式なし」をデフォルトにする

【WPF】右クリックメニューでデータグリッドの内容をコピーする

(Chrome拡張機能) navigator.clipboard を利用したクリップボードへの貼り付けが httpサイトでは失敗する