Chrome24 + Manifest v2 にて、Chrome拡張機能 + FileSystemAPI を使ってみた

Chrome Google

以前、Chrome拡張機能でFileSystemAPIを使う記事を書きました。
Chrome拡張機能でFileSystemAPIを使ってみた - メモ的な思考的な


それを使って個人的な拡張機能を作っていたのですが、ふと先日気づいたところ、動作していないことが分かりました。
そこで、現在のChrome24に対応できるようにしてみたときのメモを残します。



お世話になったサイト

ManifestFileのバージョン2対応や、APIの切替、拡張機能のデバッグなどで以下のサイトが参考になりました。ありがとうございました。

動作確認環境

修正箇所

1. manifest.jsonについて

manifestのバージョンを追加します。

"manifest_version": 2,


background関係の記載が変更となりました。JavaScriptを指定しても動作するようです。
そのため、background.html内のタグに記載していたJavaScriptをbackground.jsとして作成し、そちらを指定するようにしました。
なお、不要なbackground.htmlファイルは削除しました。

- "background_page": "background.html",
+ "background": {
+   "persistent": true,
+   "scripts": [
+     "background.js"
+   ]
+ },
2. ContentScriptとBackground間のメッセージ連携

今まで使用していた「chrome.extension.sendRequest()」「chrome.extension.onRequest.addListener()」は非推奨扱いになりました。
代わりに、「chrome.extension.sendMessage()」「chrome.extension.onMessage.addListener()」にて連携するようになりました。

3. WebKitBlobBuilderを使用したファイル作成は不可に

代わりにBlobのコンストラクタを使用して作成するようになりました。
(WebKitBlobBuilderを使おうとすると、「Uncaught ReferenceError: WebKitBlobBuilder is not defined 」エラー)
参考：WebKitBlobBuilderが削除 - fragmentary


なお、Blobはappendを持っていないため、必要なものをコンストラクタにてすべて渡すのが良いようです。
(appendを使おうとすると、「「Uncaught TypeError: Object # has no method 'append' 」エラー)
参考：BlobBuilderインターフェースが非推奨となっていた - 人生が二度あれば


ソースコード

3ファイルだけなので、以下に記載します。
GitHubにもアップしました。
thinkAmi/Sample_FileWriter · GitHub

manifest.json
{
  "name": "File Writer Sample",
  "version": "2",
  "manifest_version": 2,

  "background": {
    "persistent": true,
    "scripts": [
      "background.js"
    ]
  },

  "content_scripts": [
    {
      "matches": [
        "http://www.w3.org/"
      ],
      "js": [
        "contentscript.js"
      ]
    }
  ]
}
background.js
//  DOM解析
var title = document.getElementsByTagName("TITLE").item(0).firstChild.nodeValue;
//  URL取得
var url = location.href;


chrome.extension.sendMessage({
    "siteTitle": title,
    "siteUrl": url
});
contentscript.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse){
  var errorCallback = function(e){};

  webkitRequestFileSystem(TEMPORARY, 1024*1024, function(fileSystem){

    fileSystem.root.getFile("testfile.txt", {'create':true}, function(fileEntry){
      fileEntry.createWriter(function(fileWriter){

        //  ファイルの書き込み位置は、一番最後とする
        fileWriter.seek(fileWriter.length);

        //  出力行
        var lines = '';


        //  0バイトファイルの場合、ヘッダ行を作成する
        if (fileWriter.length == 0)
        {
          var headers = new Array(addQuote("サイトタイトル"),
                                  addQuote("URL"));
          lines = headers.join(",") + "\n";
        }


        //  データ行の作成
        var details = new Array(addQuote(request.siteTitle),
                                addQuote(request.siteUrl));
        lines += details.join(",") + "\n";

        var blob = new Blob([
          lines
          ],
          {
            type: 'text/plain'
          }
        );

        fileWriter.write(blob);


        fileWriter.onwriteend = function(e) {
          console.log('Write completed.');
        };

        fileWriter.onerror = function(e) {
          console.log('Write failed: ' + e.toString());
        };

      }, errorCallback);
    }, errorCallback);
  }, errorCallback);
});



/*
  CSVファイル用に、項目をダブルクオートで囲む
*/
function addQuote(field)
{
  return  "\"" + field + "\"";
}

ファイルの保存先

以前と変わらず、下記のサブディレクトリの中を追っていくと、ファイルがあります。

%USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default\File System

公式ドキュメントなど

日本語の情報が古い可能性があるため、公式ドキュメントを読んだほうが良さそうでした。