onsubmit="return false"にしているのにsubmitされてしまう

photo by Alex Proimos

Chrome Extensions（拡張機能）を開発しているときに、submitの無効化でつまづいたのでまとめておく。

submitが無効化できない

Extensions用のページで<form onsubmit=”return false;”>と書いているのに、なぜかページが更新されてしまった。

3時間くらい悩んで、コンソールに一瞬だけエラーが表示されていることに気づいた。
エラー内容は次のようなもの。

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash('sha256-....'), or a nonce ('nonce-...') is required to enabled inline execution.

インラインでJavaScript書いちゃダメだよ！というエラー。

Chrome Extensionsは、HTMLに<script type="text/javascript"></script>とか<form onsubmit=”return false;”>とは書かずに、すべて外部ファイルにまとめなければならない。

submitを無効化する方法

document.getElementById('hoge-form').addEventListener('submit', function(event) {
    event.preventDefault();
}, false);

このようなsubmitを無効化する処理を外部ファイルに書き、HTMLで<script src=”hoge.js”></script>のように読み込む必要がある。

参考サイト

• Tutorial: Migrate to Manifest V2 - Google Chrome
• Refused to execute inline event handler because it violates the following Content Security Policy Error in Chrome App - Stack Overflow
• Chrome Extensionのmanifestバージョンを上げる(1から2へ) - ike-daiの日記

以上

written by @bc_rikko