Chrome拡張機能開発で Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'".が出たとき

2022/1/11 2022/1/11 書き溜め

Chrome拡張機能っていいよね。今まであまり使ってこなかったのだけど、jsかければ自分だけでも使える拡張機能がつくれちゃう。

今回は、Chrome拡張機能を作っていた際に発生したエラーの対応策の書き溜め。

js関数を実行させようとしたら、Refused to execute inline event handler.. のエラーが発生

ボタンにonClickを追加しようとしたら下記のエラーがでた。

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

htmlは下記のようにonclickでjsを実行させるだけ。


&lt;div class=&quot;box&quot;&gt;
    &lt;button class=&quot;save button&quot; onclick=&quot;saveItem()&quot;&gt;Save&lt;/button&gt;
&lt;div&gt;

<div>

原因

公式でも言及しているためそっちをみたほうが早いけど、

Chrome アプリのページでインラインスクリプトを使用できないことが原因です。

scriptブロックと、イベントハンドラ（<button onclick="…">）の両方が禁止されています。

対策

禁止されているのはわかったので対策としては、jsファイル側にDOMContentLoadedを定義する。

document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    document.querySelector(&#39;.save&#39;).addEventListener(&#39;click&#39;, saveItem);
});

document.addEventListener('DOMContentLoaded', function() {

document.querySelector('.save').addEventListener('click', saveItem);

});

詳しくは公式サイトをみてね。

じゃあね〜〜〜。