総合 ゲーム 画像動画

【開発日誌】Hyper Drag (Firefox用アドオン)

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

WebExtensionsに対応。

1.1.0

テキストのコピー、ツイート検索を追加。
ドラッグする各方向に対する動作を設定できるように変更。
ドラッグ最低距離の最小値を20から10へ変更。

1.2.0

リンクのURLコピーを追加。
コピーしたことを通知領域(右下)に通知するように変更。

1.2.1

プレーンテキストのURL判定を変更。
末尾スペース、改行に対応。テスト用テキストを用意しました。

1.3.0

プレーンテキストのURL判定を変更。
先頭の空白、改行に対応。テスト用テキストを用意しました。
Firefox 58との互換性。

1.3.1

バグを修正。

1.3.2

設定画面の表示を修正。

 


 

機能修正・追加予定

グーグル以外の検索サイトを設定したりドラッグする方向で検索サイトを変えたりするのは容易なのですが、その機能はまだ付けていません。

設定や機能を増やすことでユーザビリティが低下することもあるので要望があれば、という感じで実装を先送りにしました。

 


 

コード解説

全て書くと量が多く解説も難しいのでロジックと詰まりそうなポイントを解説。

 

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-)

設定画面の表示崩れを修正。

この記事へのコメント

  1. 名前:名無しさん 2017/12/20(水) 16:42:36返信する

    必要な機能に焦点を絞りユーザビリティを重視した良いアドオンだと思います。

    要望なのですが、
    ・画像検索のオンオフ切り替えを追加
    ・ドラッグ最低距離に10を追加
    して頂けると幸いです。

    • 名前:hyper_T 2017/12/22(金) 14:59:53返信する

      両方とも次回の更新で追加させて頂きますね。
      12月末から1月の中頃までに配信予定ですので更新をお願いします。

  2. 名前:名無しさん 2018/01/04(木) 11:45:03返信する

    57で動作しなくなったDragItの代替を探して色々試してたどり着きました

    指定サイトでの検索の機能は実装可能であれば是非お願いしたいです
    あと、リンクへのドラッグにリンクURLをコピーというアクションがあればとも思います

    • 名前:hyper_T 2018/01/04(木) 13:20:39返信する

      指定サイトでの検索機能とは、
      自分でURLを指定したり、好きな検索サイトを追加したいということでしょうか?
      パラメータを自分で作成する方法は実装を考えたのですが、
      セキュリティの都合上難しく危険があります。
      リリースする場合は公式の審査を通さないようなものになるかもしれません。
       
      リンクのドラッグURLコピーは何故思いつかなかったのか、素晴らしいアイデアをありがとうございます。
      次回のアップデートで実装させてもらいます。
      早ければ今週中に、間に合わなければFirefox58リリース(予定日の1月23日)以降に合わせて更新します。

  3. 名前:名無しさん 2018/02/13(火) 11:55:51返信する

    大変便利な拡張で助かっております。
    設定画面で”テキスト”のみ、説明文がズレて下方向ドラッグの設定にかぶってます。
    クリックで選択できないので、Tabキーと方向キーで設定しました。
    Windows10 1709、Firefox 58.0.2、Hyper Drag 1.3.1

    • 名前:hyper_T 2018/02/13(火) 12:58:35返信する

      報告ありがとうございます。
      環境によってはそのようなことが起こるのを想定していませんでした。
      今週中には修正させて頂きますね。報告感謝します。

  4. 名前:名無しさん 2018/04/14(土) 22:08:58返信する

    求めていたもの。
    もっと有名になってほしい

    • 名前:hyper_T 2018/04/15(日) 00:54:49返信する

      役に立っているなら幸いです。
      作った甲斐がありました、うれしいです。

コメントを残す。

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。