日本語URLも綺麗に。AIと協力して作った「カスタマイズ可能なMarkdownリンクコピー」拡張機能

この投稿はAIによる出力を加筆修正したものです。

1. はじめに

• 制作の動機：既存ツールへの小さな不満
  • ページタイトルに含まれる [ ] でリンクが壊れるのを防ぎたい。
  • 日本語URLがエンコードされて長くなるのを、デコードして読みやすくしたい。
  • これらを「手作業」で直す手間をゼロにするため自作しました。

2. 拡張機能「Quick Md Copy」の概要

• 3つの実行方法
  1. アイコンクリック： ページ全体のリンクをコピー。
  2. 右クリックメニュー： 選択範囲をハイライト付きリンク（Text Fragments）としてコピー。
  3. ショートカットキー： ページ全体（Ctrl+M）/ 選択範囲（Alt+M）に両対応。
• 主なカスタマイズ機能
  • [] や | の全角変換、URL・テキストフラグメントのデコード。
  • 長い引用文を「単語の区切り」で判別してスマートに省略する機能。

3. 開発の裏側：AIによる高度なロジックの実装

やりたいことを伝え、具体的なコードはGeminiに生成を依頼。初心者である自分だけでは辿り着けなかった以下の実装を盛り込みました。

• Intl.Segmenter による単語解析：
  テキストを省略する際、単に文字数で切るのではなく「単語の境界」を認識して切ることで、ブラウザのハイライト機能が壊れない正確なリンクを生成。
• Offscreen API による制限の回避：
  通常、ブラウザの制限でコピーが失敗しやすい特権ページ（chrome://等）でも、バックグラウンドで一時的なドキュメントを生成して確実にクリップボードへ書き込む処理を実装。

4. こだわったポイント

• コピー完了の視認性
  • コピーした瞬間に「Markdown Copied!」と通知を表示。
  • 「確かにコピーできた」という安心感・フィードバックを重視。
• 制限ページへの対応
  • chrome:// ページ上でもリンクのコピー自体は可能に。（※ブラウザの仕様上、コピーした chrome:// リンクを直接クリックして遷移することはできません）

5. まとめ

初心者でも、AIを「優秀な実装担当」として協力することで、細かい不満を解消する実用的なツールが完成しました。
同じような悩みを持つ方の参考になれば幸いです。

6. おわりに

初投稿です。最後まで読んでいただきありがとうございます。
もしよろしければ、GitHubのスターや、使ってみた感想・フィードバックをいただけると嬉しいです！