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");
			});
		});
	});
});

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