CSV 簡単にダウンロードしたりコピペするための拡張機能の作り方（完成品）

【初心者向け】CSV Downloader Chrome拡張機能の作り方

ここでは、日本語の文字化け対策や拡張機能ポップアップの幅の拡大、さらに コピー機能を備えた「CSV Downloader」Chrome拡張機能の作り方を解説します。
コードをそのままコピペするだけで作れるので、初心者の方にもおすすめです。

gptでcsv出力してもらってから、毎回ファイル作ってたら一日終わりそうだたので拡張機能作った

— え１７う@web4×ライフフッカー (@luv_kuki52229) February 1, 2025

Chrome拡張機能の知識がほとんどなくても、コピー＆ペーストだけで機能を実装できるように丁寧に解説しています。

◆ こんな方におすすめ

• 自作のCSVを簡単にダウンロードできるChrome拡張が欲しい

• 日本語が文字化けしないようにBOMを入れたい

• CSVをタブ区切りに変換して、そのままExcelやスプレッドシートに貼り付けたい

• ポップアップの幅を広げて、入力や操作をしやすくしたい

◆ 完成イメージ

ポップアップ画面でCSV形式のデータを貼り付け、ダウンロードしたりコピーできる拡張機能を作成します。
ダウンロードする際にBOMを付加することで、日本語が文字化けせずにExcelやGoogleスプレッドシートに入力可能。
また、「コピー」ボタンでタブ区切りへ変換し、セルごとにデータを分割して貼り付けることができます。

◆ 必要なファイル一覧

今回は以下の4ファイルを用意すればOKです。すべて同じフォルダに配置してください。

• manifest.json（拡張機能の設定ファイル）

• popup.html（拡張機能ポップアップ画面のHTML）

• popup.css（ポップアップ画面のCSS）

• popup.js（ポップアップ画面のJS）