What is “Text Drain Extension”
特にWEB開発をしている時にアドレスバーにある文字をコピペして適当なエディタに貼るという動作をよくやっていて、それからクエリ文字列を選択してさらにコピペして…。10秒くらいで終わるんですけど、なんかもうちょっと楽にならないかなぁ、ボタン一つでコピーできたらなぁ、という怠惰な気持ちからTextDrainExtensionが産まれました。リクエストURL全体のコピーはもちろん、ドメインのみやクエリパラメータのみのコピーもワンクリックで可能。さらにWebサイトのhtmlタグからテキストを取得してサイトを構成するテキスト単位でのコピーも行うことができます。Chrome拡張ですのでGoogleChromeで動作します。
ソース
githubでMITライセンスにて公開しています。
技術的な解説
chrome-extension-cli
chrome-extension-cliをベースにさせてもらいました。
処理
ざっくりシーケンス図
Webサイトを開いた時点でcontentScript.jsが実行され、その際にサイトのテキストデータとURL情報をbackground.jsに送りメモリに保持します。chrome拡張のボタンを押下してpopup.htmlが立ち上がるとpopup.jsがbackground.jsにテキストデータとURL情報を取得しに行き、popup.htmlにコピペボタンが描画されます。
データの受け渡し
chromeのAPIがあるのでこれを利用します。
基本contentScript,background,popupの3者間でメッセージの送信と返答を行うことでデータの受け渡しを実現します。contentScriptとpopupからbackgroundへのメッセージ送信はchrome.runtime.sendMessageを、backgroundからcontentScriptへのメッセージ送信はchrome.tabs.sendMessageを利用しました。backgroundではタブがアクティブになったイベントをキャッチするためにchrome.tabs.onActivatedを利用し、アクティブになったタブのテキストデータとURL情報を再取得するようにしています。
コピペボタン
クリップボードへのデータのコピーはnavigator.clipboard.writeTextを利用しています。
UI
最近流行りのNeumorphism（ニューモーフィズム）っぽいボタンにしてみました。cssは以下のサイトを利用させてもらって生成したのをベースにさせてもらいました。
（個人的にはすごくいい感じになったと思ってる）
感想
個人的に欲しいと思ったツールを自分で作ってgithubに公開するという体験はこれが初でしたが自分で思っていた機能をほぼほぼ思い通りに実現できたのでとても嬉しい気持ちがしております。いろいろ作って発信することで技術的にレベルアップしていきたいと思った次第です。
No responses yet