[chrome拡張機能]自分専用のメモ帳をJavaScriptで作ろうとしています。しかし、ajax通信が出来ません。

Question

##やりたいこと/実現したいこと
自分専用のメモ帳を作りたい。

・Ajax通信を使い、メモ帳で編集中のデータを自分のWEBサーバーに保存したい。
・chromeの拡張機能として作成したい。

##現状
※Jquery.min.jsがインポートされている前提

<textarea rows="10" id="textxs"></textarea><br>
<input type="text" value="index.txt" size="42" id="filename">
<input type="button" value="保存" onclick="save();">
<input type="button" value="読み込み" onclick="read();">

/* 便利関数 */
function _(id) {
	return document.getElementById(id);
}

onload = function(){
        read();
}

var filename = _("filename").value; //※サーバー側ではこの名前で保存されません
function read() {
	$.ajax({
		url: "http://{URL}/_callback.php",
		type: "POST",
		dataType: "json",
		data: {
			"Type": "read",
			"FileName": filename,
		}
	}).done(function (r) {
		_("textxs").value = r;
	}).fail(function (e) {
		_("textxs").value = "取得出来ませんでした.. \n\n[エラーの詳細]\n" + e;
	})
}
function write() {
	$.ajax({
		url: "http://{url}/_callback.php",
		type: "POST",
		dataType: "json",
		data: {
			"Type": "write",
			"FileName": filename,
			"Text": _("textxs").value,
		}
	}).done(function (r) {
		_("textxs").value = r;
	})
	.fail(function (e) {
		_("textxs").value = "保存出来ませんでした..\n\n[エラーの詳細]\n" + e;
	})
}

##エラー内容

// 1つ目
Uncaught TypeError: Illegal invocation
// 2つ目
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
// 3つ目
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

どなたかよろしくお願いいたします。

Comments

[yasutakatou]

Refused to execute inline event handler～は以下の事例だと思います。
https://teratail.com/questions/116400
on～が使えないやつです。Uncaught TypeError: Illegal invocationはどこでエラーになっているか情報ありませんか？普通だとエラーの前にエラーになっている行数が出てたりすると思うのですが。

[ActiveTK]

ありがとうございます。
そのような仕様があるんですね!

[ActiveTK]

エラーの書いてある行数がたくさんあるので、省かせてもらっていました。

[yasutakatou]

いえいえ。承知しました。
となるとあと解消したいのは「Uncaught TypeError: Illegal invocation」の部分だけでしょうか？
一旦、Refused to execute inline event handler～を修正したあとでどうなったか教えて頂けると助かります。今度はエラーになった行の情報も添えて頂けますようお願いします。

[ActiveTK]

Refused to execute inline event handler～を修正した結果、もう一つのエラーも無くなりました。
ありがとうございました。

[yasutakatou]

エラーが解消できて良かったですね！僕も嬉しい。では回答として追記しておきますねー。

Answer 1

Refused to execute inline event handler～は以下の事例だと思います。
https://teratail.com/questions/116400
on～が使えないやつです。こちらの対処によって「Uncaught TypeError: Illegal invocation」のエラーも解消したとのご連絡を頂いております。