以前、Chrome拡張機能でFileSystemAPIを使う記事を書きました。
Chrome拡張機能でFileSystemAPIを使ってみた - メモ的な思考的な
それを使って個人的な拡張機能を作っていたのですが、ふと先日気づいたところ、動作していないことが分かりました。
そこで、現在のChrome24に対応できるようにしてみたときのメモを残します。
修正箇所
1. manifest.jsonについて
manifestのバージョンを追加します。
"manifest_version": 2,
background関係の記載が変更となりました。JavaScriptを指定しても動作するようです。
そのため、background.html内の
なお、不要な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 #
参考: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
公式ドキュメントなど
日本語の情報が古い可能性があるため、公式ドキュメントを読んだほうが良さそうでした。