​ ​

chromeの拡張機能を利用してテーブルの内容をCSVダウンロード

こんにちは。方川です。

今日はchromeの拡張機能を使って簡単な機能を書いてみました。

機能といっても、適当なもので、 ページ上のtableタグで記載された一覧の内容をCSVにしてダウンロードするだけのものです。

20161104screen.gif

manifest.json


{
    "name": "Table2CSV",
    "manifest_version": 2,
    "version": "1.0",
    "description": "表の内容をCSVに変換してダウンロードします。",
    "permissions": [
        "contextMenus",
        "downloads",
        "tabs",
        "http://*/*",
        "https://*/*"
    ],
    "background": {
        "scripts": [ "background.js" ]
    },
    "content_scripts": [{
        "matches": [ "http://*/*", "https://*/*" ],
        "run_at": "document_end",
        "js": [ "jquery-3.1.1.min.js", "contentScripts.js" ]
    }]
}

background.js


function table2csv(info, tab) {
   chrome.tabs.sendMessage(tab.id, { command: "table2csv" }, function (r) {

       var url = r && r.table2csv || "";
       if ( url ) {
           chrome.downloads.download({ url: url, filename: "table.csv"});
       }

   });
}

var cm = chrome.contextMenus.create({
    type: "normal",
    title: "テーブルの内容をCSVダウンロード",
    contexts: [ "all" ],
    onclick: table2csv
});

contentScripts.js


function makeCSV () {

    return $('thead > tr, tbody > tr').map(function () {

       return $(this).find('th,td').map(function () {

           return '"' + ($(this).text().replace(/"/g, '""')) + '"';

       }).get().join(',');

    }).get().join("\n");
}

function onMessage (msg, sender, senderResponse) {

    var command = msg && msg.command;

    if ( command === 'table2csv' ) {

        var bom = new Uint8Array([0xEF, 0xBB, 0xBF]),
            blob = new Blob([ bom, makeCSV() ], { "type": "text/plain" }),
            url = window.URL.createObjectURL(blob);

        senderResponse({ table2csv: url });

    }
    else senderResponse({});

}

chrome.runtime.onMessage.addListener( onMessage );

※ jquery-3.1.1.min.jsをmanifest.jsonと同じ場所に保存する必要があります。

以下は利用したAPIです。

  • chrome.contextMenus
  • chrome.tabs
  • chrome.downloads
  • chrome.runtime

content_scriptsの宣言はDOM操作が必要だったので使っています。 それとDOM操作にはjQueryを利用したかったので 先に読み込むようにしてます。

background側からだと対象ページのDOM操作ができないので、 sendMessageを使ってcontent_scripts側で処理を行わせるようにしています。

まとめ

chrome extensionといえば、HTTP headersのようなセキュリティ上の懸念があったりと悩ましいところですが、 それでも便利であるのは変わりないので、作り方を把握しておくと、いつか役に立つかも。

スカイアーク/ファームノートではWEBアプリケーションエンジニアを募集しています。詳しくはこちらから

このエントリーをはてなブックマークに追加