Hyper Drag
https://addons.mozilla.org/ja/firefox/addon/hyper-drag/
説明
検索補助用のアドオンです。
テキストをドラッグドロップすることで簡単にテキスト検索が行えます。
画像をドラッグドロップすると画像のパスを開いたり、画像を保存したり、グーグル画像検索にかけたりできます。
ドラッグする対象によって違う動作をします。
- テキスト（文字）：グーグル検索、ツイート検索、クリップボードへコピー。
- テキスト（URL）：URLを開きます。
- リンク：テキストの検索、URLの検索、URLを開く。
- 画像：画像のパスを開く、保存する、グーグルで画像検索する。
テキスト（URL）は「http」「https」「ttp」「ttps」「ドメイン」から始まる、
URLとして利用できる文字列を判別してURLとしてタブを開きます。
現在確認されているバグ
報告を受け付けています。
更新履歴
1.0.0
1.1.0
ドラッグする各方向に対する動作を設定できるように変更。
ドラッグ最低距離の最小値を20から10へ変更。
1.2.0
コピーしたことを通知領域（右下）に通知するように変更。
1.2.1
末尾スペース、改行に対応。テスト用テキストを用意しました。
1.3.0
1.3.1
1.3.2
1.3.3
1.3.4
Ctrlキーを押している間はURLでもプレーンテキストとして検索するように変更。
1.4.0
1.4.1
1.4.2
1.4.3
1.5.0
1.5.1
1.5.2
1.5.3
1.5.4
1.5.5
1.5.6
機能修正・追加予定
グーグル以外の検索サイトを設定したりドラッグする方向で検索サイトを変えたりするのは容易なのですが、その機能はまだ付けていません。
設定や機能を増やすことでユーザビリティが低下することもあるので要望があれば、という感じで実装を先送りにしました。
コード解説
全て書くと量が多く解説も難しいのでロジックと詰まりそうなポイントを解説。
APIはタブとストレージとダウンロードを使っています。
“permissions”: [“tabs”,”storage”,”downloads”]
ドラッグすると○○という処理はJavaScriptのドラッグイベントを使っています。
この8つの内dragstart,dragend,dragover,dropを使用しています。
DOM上のドラッグイベントは”content_scripts”に書いています。
コンテンツスクリプとバックグラウンドスクリプトの間のやり取りはメッセージで行っています。 browser.runtime.sendMessage()
コンテンツスクリプだけでもURL移動などは簡単にできるのですが、タブの操作は”tabs”のAPIが必要です。コンテンツスクリプには”tabs”を使用できる権限がないので、バックグラウンドスクリプトに渡す必要があります。
画像の保存に使っている”download”のAPIも同様です。
コンテンツスクリプト内でHTML5のdownload属性を持つ<a>リンクをクリックする方法では画像保存が上手く機能しません。
ver 1.1.0 (2017/12/25-)
クリップボードへテキストをコピーする為に”clipboardWrite”のパーミッションを追加しました。アドオンを追加更新する際にはクリップボードへの書き込みの許可を求めます。
“permissions”: [“tabs”,”storage”,”downloads”,”clipboardWrite”]
将来的には”clipboard”のAPIに移行する予定ですが、現時点では画像のコピーのみ対応していてテキストやHTMLのコピーはできません。
https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/clipboard
クリップボードへのコピーには現時点では素JavaScriptのdocument.execCommand(‘copy’)
を使っています。execCommandのコピーはユーザーのアクション（主にクリック操作）がなければ使用できません。Firefoxでは「ユーザー生成の短期的なイベントハンドラーの内部からの呼び出しでないため拒否されました。」というエラーがでると思います。
セキュリティの都合上そうなっているのですが、ドラッグドロップ操作でも同様に弾かれるので”clipboardWrite”のパーミッションを使いましょう。
ver 1.2.0 (2018/01/06-)
クリップボードへコピーしたときに成功したか分かりにくかったので通知領域に表示するようにしました。通知機能を使う為に”notifications”のパーミッションを追加しました。アドオンを追加更新する際に通知領域へ通知の許可を求めます。
“permissions”: [“tabs”,”storage”,”downloads”,”clipboardWrite”,”notifications”]
リンクのURLコピーにはexecCommandを使用しています。一時的にページに要素を追加し選択後コピーしているので、ページの表示が崩れる可能性があります。
コードはJavaScriptでクリップボードに文字をコピーする(ブラウザ)を参考にさせてもらいました。将来的には”clipboard”のAPIに移行する予定です。
ver 1.2.1 (2018/01/06-)
プレーンテキストのURL判定を変更して、末尾にスペースや改行があってもURLだと判定するようにしました。スペースは1文字までURLだと判定します。
先頭は「http」「https」「ttp」「ttps」「ドメイン」から始まる必要があります。
確認用テキスト（URL）
https://addons.mozilla.org/ja/firefox/addon/hyper-drag/
https://addons.mozilla.org/ja/firefox/addon/hyper-drag/
http://addons.mozilla.org/ja/firefox/addon/hyper-drag/ ahttps://addons.mozilla.org/ja/firefox/addon/hyper-drag/a https://addons.mozilla.org/ja/firefox/addon/hyper-drag/ a
ver 1.3.0（2018/01/25-）
プレーンテキストのURL判定を変更しました。先頭の空白や改行に対応しました。これで一行のテキストをダブルクリックで選択したときにURLと認識できる精度が上がったと思います。
Firefox 58との互換も確認しました。バグなどあれば報告を受け付けています。
ver 1.3.1（2018/01/26-）
ドロップ方向：上下に対応するアクションが使えなかったバグを修正。
ver 1.3.2（2018/02/13-）
設定画面の表示崩れを修正。
ver 1.3.3（2018/08/03-）
タブフォーカスの設定を追加。
テキスト、リンク、画像でタブの動作をそれぞれ設定できるようにしました。
ver 1.4.0（2019/03/18）
検索エンジンを指定できるように変更。
この検索エンジンはFirefoxのアドレスバーや検索バーで使用されている検索エンジンを利用しています。自分で新たに追加することもできます。
Firefoxのオプションの検索で設定できます。追加できる検索エンジンはこちらから検索できます。https://addons.mozilla.org/ja/firefox/search-tools/
検索エンジンを利用するにあたって新しくsearch APIの権限を追加しました。これに伴いサポートするバージョンはFirefox 63.0以上になりました。
search APIの使い方を少しだけ解説。
現時点では2つしかメソッドがなく最小限の機能しかありません。
- search.get() 登録されている検索エンジンを取得します。名前を取得しましょう。
- search.search() 検索ワードと検索エンジンを指定して検索します。
タブの指定で機能が足りていないので少し工夫が必要です。何も指定しない場合は最後列にアクティブで開きます。指定する場合は{tabId: integer}で指定します。
タブの位置指定とアクティブの指定は”tabs API“と組み合わせることで再現できます。
- search.search()する前に全タブのidを取得 tabs.query()
- tabs.create()で最終的に再現したい状態でタブを作成
- URLは”about:blank”を使用
- もう一度全タブのidを取得して1.で取得したid郡と比較してsearch.search()で置き換えるタブのidを探しておく
- search.search()を実行、tabIdには4.で取得したidを指定する
スマートではありませんがsearch APIが変更されるまではこうしておきます。
ver 1.4.2 – 1.4.3（2019/04/13）
プレーンテキストに含まれているURLの判定を調整。より補足しやすいように変更しました。
画像の簡易保存アクションを追加しました。保存設定はブラウザのファイル保存設定に従うのでファイル名の変更や保存場所の指定はできません。指定したい場合は通常の画像保存アクションを使ってください。
ver 1.5.0（2019/05/14）
全てのアクションで「タブの位置」と「タブの状態」を変更できるようにしました。
少し複雑になりましたがこれで思い通りのアクションを設定できると思います。
コードを大きく変更したので旧バージョンの設定が上手く引き継げない場合があるかもしれません。その他バグも見つけたらコメントしておいてください。
ver 1.5.1（2019/11/08）
タブバーとアドレスバーにドロップした際には動作させないようにしました。
タブバーとアドレスバーは「ウィンドウ（Firefox）の一番上から64pxまでの範囲」として動作停止の対象としています。
環境により範囲が正しく指定されない可能性があります。
ver 1.5.2（2020/02/15）
画像検索に使うURLを調整しました。具体的にはパラメータの「&site=search&」が不要だったので削除しました。
ver 1.5.4（2021/12/17）
最後に開いていたタブにフォーカスする設定を追加。
- browser.tabs.onActivated
- successorTabId: activeInfo.previousTabId
を使うことでデフォルトのタブフォーカスを明瞭化。
ver 1.5.6（2022/03/12）
リンクではないURL文字列をドロップした場合、今までは直接そのURLを開いていましたがこれをURL文字列として検索する設定を追加しました。
設定がオフであってもCtrlを押したままドロップすればURL文字列として検索できます。
設定がオンでかつCtrlを押したままドロップするとURLを直接開きます。（設定を簡易的にオフにする機能）
必要な機能に焦点を絞りユーザビリティを重視した良いアドオンだと思います。
要望なのですが、
・画像検索のオンオフ切り替えを追加
・ドラッグ最低距離に10を追加
して頂けると幸いです。