はじめに

Chrome 拡張機能で CSV ファイルを生成してダウンロードする方法について整理した。

TL;DR

ほぼ JavaScriptでファイルダウンロード処理を実現する - Qiita の通り

  • new Blob でオブジェクトを生成
  • createObjectURL で URL に変換
  • <a href="..." download="hoge.csv"> でダウンロード
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. manifest.json
    2. JS(main.js)
  5. まとめ
  6. 参考文献

環境・条件

Google Chrome バージョン: 77.0.3865.120（Official Build） （64 ビット）

詳細

リポジトリ: 17number/chrome-extension-file-download-example

拡張機能を有効化後に Google のトップページ(https://www.google.co.jp/)にアクセスすると、以下内容の CSV ファイルを生成・ダウンロードするサンプルコード。

1
2
あいうえお,かきくけこ,さしすせそ
たちつてと,なににねの,はひふへほ

JavaScriptでファイルダウンロード処理を実現する - Qiita を参考にした。

manifest.json

Google のトップページ(https://www.google.co.jp/)でのみ動作するように指定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "File Downloader sample",
  "manifest_version": 2,
  "version": "1.0.0",
  "content_scripts": [
    {
      "matches": [
        "https://www.google.co.jp/"
      ],
      "js": [
        "main.js"
      ]
    }
  ]
}

JS(main.js)

ほぼ JavaScriptでファイルダウンロード処理を実現する - Qiita の通り。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function handleDownload() {
  const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
  const content = 'あいうえお,かきくけこ,さしすせそ\nたちつてと,なにぬねの,はひふへほ';
  const blob = new Blob([ bom, content ], { "type" : "text/csv" });

  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(blob, "test.csv");
    window.navigator.msSaveOrOpenBlob(blob, "test.csv");
  } else {
    const url = window.URL.createObjectURL(blob);
    document.getElementById("myDownload").href = url;
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
    }, 1000)
  }
}

(function() {
  'use strict';
  document.body.insertAdjacentHTML(
    "afterEnd",
    `
    <a id="myDownload" href="#" download="test.csv">ダウンロード</a>
    `
  );
  document.getElementById("myDownload").addEventListener("click", handleDownload);
  document.getElementById("myDownload").click();
  document.getElementById("myDownload").remove();
})();

主な変更点は下記。

  • handleDownload を main.js 内に直接定義(<script> タグは使わない)
  • window.URL.revokeObjectURL を setTimeout で実行
    • コメント で「解放した方が良い」とあったが、href 設定時に実行するとダウンロードエラーになるため setTimeout でタイマー設定
  • onClick="handleDownload" だとエラーになるので、addEventListener でイベントリスナーを設定
    • ついでに即クリック、即削除しているが、実際の拡張機能ではダウンロードリンクを表示しておいて良いと思う

まとめ

ほぼ JavaScriptでファイルダウンロード処理を実現する - Qiita の通り

  • new Blob でオブジェクトを生成
  • createObjectURL で URL に変換
  • <a href="..." download="hoge.csv"> でダウンロード

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list