はじめに

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

TL;DR

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

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

目次

  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();
})();

主な変更点は下記。

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

まとめ

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

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

参考文献

関連記事