JavaScript
CoffeeScript
Chrome

chrome extension/appsでパッケージ内のファイルを読み込む

More than 5 years have passed since last update.


chrome extension/apps でパッケージ内のファイルを読み込む

コードから参照する設定とかはmanifest.jsonみたいに外に出したいよね、と思って調べたよ。


chrome.runtime.getPackageDirectoryEntry

extensionもappsも、このAPIを使用することでパッケージのファイルを自由に参照可能。

APIは引数にコールバック関数を1つとり、そのコールバックに DirectoryEntry オブジェクトを渡して呼び出す。

DirectoryEntryがどんなプロパティを持っているかは以下のドキュメントを参照するのが手っ取り早い。

File API: Directories and System

Entry オブジェクトを継承しているので、そこで定義されているプロパティ等も使える。

getFileとかgetDirectoryとか、あらかじめ参照したい名前が分かっている場合はこの関数を使えばよさそう。

逆に名前が分からない場合はcreateReaderを使って走査する必要がある。

今回は設定ファイルの読み込みが目的なので、getFileでOK。

試しに名前とかを出力してみる。


background.coffee

chrome.runtime.getPackageDirectoryEntry ( root ) ->

console.log 'name: ' + root.name
console.log 'path: ' + root.fullPath

コンソールへの出力はこんな感じ。

name: crxfs

path: /crxfs

特にパーミッション等の設定も不要な様子。

DirectoryEntryオブジェクトを取得したら、そこからgetFile関数で目的のファイルの FileEntry オブジェクトを取得する必要があるみたい。

ということで、こんな感じの設定ファイルをmanifest.jsonと同階層(パッケージの直下)に配置して、これを読み取ってみよう。


sample.json

{

"host": "localhost"
}

コードは次のとおり。getFile関数は第4引数にエラー用のコールバックを取るけど、今回は省略。


background.coffee

chrome.runtime.getPackageDirectoryEntry ( root ) ->

root.getFile 'sample.json', ( create: false ), ( sample ) ->
console.log 'name: ' + sample.name
console.log 'sample: ' + sample.fullPath

出力。

name: sample.json

sample: /crxfs/sample.json

これでFileEntryオブジェクトの取得までOK。

FileEntryオブジェクトを取得できたら、 file プロパティを使って File オブジェクトを取得する。


background.coffee

chrome.runtime.getPackageDirectoryEntry ( root ) ->

root.getFile 'sample.json', ( create: false ), ( sample ) ->
sample.file ( file ) ->
console.log 'name: ' + file.name
console.log 'size: ' + file.size


name: sample.json

size: 27

Fileオブジェクトが取得できれば、あとは煮るなり焼くなり、といった感じ。

Fileオブジェクトの取り回しや今回使用したFile APIの概要に関しては次のスライドがとてもわかりやすい。

Blob, FileそしてFileSystemAPI - Google Docs

今回は設定ファイルを読み出したいので、 FileReader を使って内容をテキストで読み出してオブジェクトにパースする。


background.coffee

chrome.runtime.getPackageDirectoryEntry ( root ) ->

root.getFile 'sample.json', ( create: false ), ( sample ) ->
sample.file ( file ) ->
reader = new FileReader
reader.onload = ( e ) -> console.log JSON.parse( e.target.result )
reader.readAsText file, 'utf-8'

Object

host: "localhost"
__proto__: Object

終わり!