フリーランチ食べたい

機械学習/データ解析/フロントエンド/バックエンド/インフラ

【Chrome Extension】簡単にURLとタイトルをコピーできる「simple-url-copy」作りました

今閲覧しているURLとタイトルを簡単にコピーできるChrome Extensionを公開しました。

https://github.com/ikedaosushi/simple-url-copy/raw/master/assets/how_to_use.gif

ダウンロードはこちらから↓

chrome.google.com

このブログでは、なぜこのChrome Extensionを作ったのか、どういう機能があるのかを簡単に紹介したいと思います。

実は同機能を持つ色々なChrome Extensionを試していたのですが、どうしても自分の欲しい機能を満たすものが見つからず、自分で作ってしまいました。 1ヶ月使ってみてかなり便利に使えているので紹介させてもらおうと思いました。

作成した背景

「タイトルとURLをコピーする」Chrome Extensionは検索すると他にも出てくるのですが、自分が欲しかった次の項目を満たす見つかりませんでした。

  • ショートカットキーで動作する。
  • 余計な文字が入っていない。必要最低限のスタイルがある。
    • 例えば「タイトル:URL」という形式はあまり好みではありませんでした。
    • 「タイトル(半角スペース)URL」「タイトル(改行)URL」「マークダウンスタイル」の3つが必要だと考えていました。
  • オプションでクエリストリングを除去できる。
    • このオプションがわかりやすい必要がありました。
  • Amazonの日本語URLに対応している。
    • 当然ですが、英語圏のChrome Extensionはこれに対応していませんでした。
  • すばやく起動する。
    • バイネームは控えさせていただきますが、「毎回すべてのタブのタイトル/URLを保存する」ような実装をしているChrome Extensionがあり、起動時間に満足できませんでした。

実はそれなりに色々な既存のChrome Extensionを試したのですが、これらをすべて満たすものはないと思います。

機能紹介

そういう事情があり、このChrome Extensionを作るに至りました。簡単に、機能とどうやって使うのか解説させてください。

f:id:ikedaosushi:20190225013449p:plain

  • Ctrl+Shift+Cかクリックで起動します。
  • 起動した時点でデフォルト形式の「タイトル(半角スペース)URL」でコピーされます。
  • その後、形式を変更したい場合はクリックでスタイルを変更することができます。
  • 「Exclude Query」をオンにするとクエリストリングを除去できます。
  • 一番下のエリアにコピーされたテキストが表示されます。

また、Amazon日本語URLを整形してくれる機能もあります。例えば

https://www.amazon.co.jp/ガウス過程と機械学習-機械学習プロフェッショナルシリーズ-持橋-大地/dp/4061529269/

というURLをコピーした際、日本語が自動でURLエンコードされて次のようになってイライラした経験がある方は多いのではないでしょうか?

https://www.amazon.co.jp/%E3%82%AC%E3%82%A6%E3%82%B9%E9%81%8E%E7%A8%8B%E3%81%A8%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92-%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E3%83%97%E3%83%AD%E3%83%95%E3%82%A7%E3%83%83%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E6%8C%81%E6%A9%8B-%E5%A4%A7%E5%9C%B0/dp/4061529269/

「simple-url-copy」は必要な部分だけいい感じに切り取ってくれます。

f:id:ikedaosushi:20190225011744p:plain

結構便利ではないでしょうか?😃

中身を少しだけ

中身はかなりシンプルなので、ほとんど言及することはないのですが、CSSはmaterial-liteを使ったので簡単に良い感じの見た目で実装できました。

getmdl.io

コードはOSSとしてGithubに公開しています。

github.com

今後の改善構想

とりあえず使えるものを作りたかったので目をつむった部分もいくつかあります。 ユーザーの数次第ですが、次のような内容は直していきたいと思っています。

  • ショートカットキーのカスタマイズ
  • デフォルトとコピー形式のカスタマイズ
  • 「Exclude Query」をSaveする(今は1回ごとにOffになる)
  • Amazon日本語URL省略の選択
  • Amazon日本語ページのタイトルの省略(良い感じにできれば)
  • 他のコピー形式の選択
  • さらに高速化

他にも自分が気づいていない改善点もたくさんあると思うのでフィードバックもらえたら嬉しいです!これからも実用的なChrome Extension作っていけたら嬉しいなと思っています。