こんにちは。elephantnodeと申します。
普段は都内で社内情報システム担当兼Web系エンジニアとして働いています。
Chromeで長時間、作業や調べ物をしていると、ついつい「タブ」をたくさん開いてしまいませんか？
私もサイトやアプリの制作などでデバッグしていると、参考にしたQiitaやNoteの記事が5個以上タブに並んでいたり、アカウントごとに複数のタブ×作業用ウィンドウがどさっと出てきたりします。
作業に区切りをつけたい時や、気分転換したい時に、ブラウザもすっきりさせて、気持ちを切り替えたいものです。
でもさっき読んだQiitaやNoteはまとめて取っておきたい！
そんな時に重宝するChromeの拡張機能を作ってみました。
タブ情報の保存に便利な「TAB INFO CLIP」
こちらが作った機能拡張の「TAB INFO CLIP」です。
現在開いているタブの情報を、お好みのフォーマットでクリップボードに一括コピーできる拡張機能です。
フォーマットはいくつかプリセットを用意していて、CSVやMarkdown、HTMLなどでクリップボードへコピーできます。タブ区切りでのコピーも可能なので、Googleスプレッドシートへ貼り付けると資料整理にも活用できます。
プレースホルダーも豊富に用意しており、タブのインデックスやファビコンのURLも取得可能です。改行、タブ文字、ダブルクォートなどもバックスラッシュでエスケープできるため、複雑なフォーマットへの対応も容易です。作業日時を記録できる日付関数も搭載しています。
また、プリセットをカスタマイズして編集したものを最大3つまで保存可能なので、次回以降も同じ形式で使えます。
Notionと組み合わせると便利！
コピーしたコンテンツの保存先に、私はNotionを使用しています。
開発内容をまとめる際、関連サイトをノートに添付する作業が一発で完了します。
Notionといえばデータベース機能が有名ですが、Markdown形式のテーブルならそのままデータベース化も可能。URLごとにページを作成できるので、サイトごとの情報整理にも最適です。
本音を言えば、ブックマークスタイルで貼り付ける方法が分かりませんでした😞 ご存知の方がいらっしゃれば、ぜひ教えてください。
一時的にタブを保存する機能も！
「クイック」を利用すると、タブのグループをコメント付きで保存できます。Chromeの標準機能にもグループ化はありますが、もっと大雑把な履歴保存で、部屋に散らかった洋服を押入れに詰め込むような機能です。
本機能では、作業中だった内容をコメントとして残すことができ、復元時にわかりやすく整理できます。
職場でもファビコンが整然と並んだウィンドウに出会うことがあります。そんな方にもおすすめしたい機能です。
使い方説明動画
使い方を動画にまとめました。
注)音楽が流れます
開発・公開の手順
ここからは公開までの道のりについてです。
Ver 1.0.0
まずは公式チュートリアルを参考に、サンプルをベースにしてVer1.0.0を作成しました。
Hello Extensionsに肉付けしながら、基本的なPopupをベースに、Cursorを使ったAI駆動開発を行いました。
tailwindcssを導入し、タブの情報をコピーできるシンプルなアプリとして形にし、社内でも使ってもらえるように公開まで実施しました。
審査に必要だったもの
Chromeウェブストアへ公開するには、パッケージの提出の他、ストア掲載情報や用途の説明などのテキストを準備する必要があります。
また、アプリが使用するブラウザの機能ごとに、使用理由の説明も求められます。
本アプリは機能が比較的シンプルで、外部送信などもないため、審査も比較的スムーズに通過できたと思います。個人情報の収集や外部APIの使用がある場合は、審査がより厳しくなる可能性があります。
この他、アプリのアイコンやスクリーンショットも必要です。
あまり考えずに作ったアイコン
無事、1日ほどで審査に通過し、公開されました。
Ver.1.0.1
ヘッダーとフッターがなかったため、MarkdownやJSONの整形ができず、すぐに対応しました。
UIは幅が広すぎて高さ制限にも収まらず、やや不格好な仕上がりでした。
カスタムも保存できてなかった。
Ver.2.0.0
公開の流れを把握できたので、次は機能とデザイン性の向上に注力しました。
この記事を通じて、「Chrome Extension Boilerplate」という便利なスターターキットを知りました。
Viteベースで、React + TypeScript + TailwindCSS構成の拡張機能が構築できます。i18n対応も組み込まれており、すぐに多言語化も可能です。
ただ、基本的に全機能の開発が盛り込まれているので、インストール時点で不要なパッケージもありますが、ちゃんと内部モジュールの管理用CLIもついています。すごい。
さらに、UIデザインにはコンポーネントが使いやすいshadcn/uiを導入しました。
開発環境が整ったので、再びCursorで開発を進めました。
アイコンも新たにデザインし直し、Ver2.0.0として申請しました。
今回は、TabとClipboardWriteに加え、SidePanelとStorageの権限が追加され、申請項目が増えました。
さらに、日本語と英語の両言語に対応させ、その旨も説明に加えました。
提出の翌日に審査が通過し、アイコンが新しいものに置き換わる瞬間を見ることができて、とても嬉しかったです。
職場の人に使ってもらってみた
まずは身近な人に使ってもらい感想を頂きました。普段タブがブラウザに多くなくても、HTMLでURLを加工することが多いWEBデザイナーさんからリンクの作成に便利！と好評を頂きました。
逆に業務でタブをたくさん開いている人には、開きっぱなしでも、どこにどんなサイトを開いているか把握していることが多く、超能力に目覚めている方もいました。ホントヨクワカルナ
あまり困ってはいなかったようです。
今後の展望について
一旦開発はここまでにして、しばらく使いつつ、機能の追加などを進めていこうと思います。URLのリストをインポートしてタブで開けるなんてのもいいなー。なにか良いアイデアがあれば教えていただけると嬉しいです。
最後に
ここまで読んでいただき、ありがとうございました。
最後にもう一度TAB INFO CLIPへのリンクを張っておきます。