Chrome App で最小限のテキストエディタを作る #JavaScript

Chromebook を入手したのでちょっとしたテキストエディタを作る。ローカルのファイルを開いて、編集して、保存するだけの最小限のもの。こんな感じのやつ。Chrome 75.0 で作成。

GoogleChromeLabs が開発しているシンプルな text-app を参考にした。こちらはエディタ部分に CodeMirror を使っておりシンタックスハイライトが出来、また複数ファイルを同時に開く程度のことはできる。
https://github.com/GoogleChromeLabs/text-app

まずマニフェストファイル。テキストエディタなのでファイルの書き込み許可が必要。

manifest.json

{
    "manifest_version": 2,
    "name": "MinimalEditor",
    "version": "0.1",
    "app": {
        "background" : {
            "scripts": ["background.js"]
        }
    },
    "permissions": [{"fileSystem": ["write"]}]
}

続いて background.js だが、これは index.html をウィンドウとして開くだけ。

background.js

chrome.app.runtime.onLaunched.addListener( function() {
    chrome.app.window.create('index.html', {
        id: 'main',
        bounds: {width: 640, height: 640}
    });
});

続いて index.html は、ヘッダーに「開く」「上書き保存」「名前をつけて保存」とファイル名の <span> 要素を並べ、その下にエディタ本体の <textarea> を置く。CSS はいいかんじに書く。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <link rel='stylesheet' href='style.css'>
</head>
<body>

<div class='wrap'>

    <div class='header'>
    <a href=# id='menu-open'>Open</a>
    <a href=# id='menu-save'>Save</a>
    <a href=# id='menu-saveas'>Save As</a>
    <span id='filename'></span>
    </div>

    <textarea id='editor'></textarea>

</div>

<script src='third_party/jquery/jquery-3.4.1.min.js'></script>
<script src='app.js'></script>

</body>
</html>

最後に app.js だが面倒なので $(document).ready() の内部に全部ぶちこむ形で書いている。Chrome FileSystem API を使用。半端にES6が混じってるけど気にしないでほしい。

app.js

function MinimalEditorApp() {}
let app = new MinimalEditorApp();

$(document).ready(function () {
    $("#menu-open").on("click", function (e) {
        e.preventDefault();
        chrome.fileSystem.chooseEntry({type: "openFile"}, function(entry) {
            app.entry = entry;
            $("#filename").text(app.entry.name);
            console.log(app.entry);
            app.entry.file(function(file) {
                let reader = new FileReader();
                reader.onload = function(e) {
                    $("#editor").text(e.target.result);
                };
                reader.readAsText(file);
            });
        });
    } );

    $("#menu-save").on("click", function(e) {
        e.preventDefault();
        const content = $("#editor").val();

        app.entry.createWriter(function(writer) {
            let blob = new Blob([content], {type: 'text/plain'});
            writer.onwrite = function() {
                writer.onwrite = function() {};
                writer.write(blob);
            };
            writer.truncate(blob.size);
            console.log("Saved!");
        }, function(error) {
            console.log("Writing Error");
        });
    });

    $("#menu-saveas").on("click", function(e) {
        e.preventDefault();
        const content = $("#editor").val();

        chrome.fileSystem.chooseEntry({type: "saveFile"}, function(entry) {
            app.entry = entry;
            app.entry.createWriter(function(writer) {
                let blob = new Blob([content], {type: 'text/plain'});
                writer.onwrite = function() {
                    writer.onwrite = function() {};
                    writer.write(blob);
                };
                writer.truncate(blob.size);
                console.log("Saved!");
            }, function(error) {
                console.log("Writing Error");
            });
        });
    });
});

とりあえずこれで一応テキストエディタとして動くが、なんのエラー処理もしていないので新規ファイルを「上書き保存」するとエラーを吐くし、編集中にウィンドウを閉じるとなんの警告も出ずに消える。