拡張機能のポップアップ クリック イベントの失敗: コンテンツ セキュリティ ポリシー違反の解決

エラーの説明

Chrome 拡張機能で、拡張機能アイコンと拡張機能の両方のクリック イベントポップアップ ページ内のボタンは、JavaScript 変数をインクリメントするという予期された応答を生成しません。

ルートの検査原因

問題をデバッグするには、ポップアップ ページを調べ、コンソール ログを調べます。このエラー メッセージは、コンテンツ セキュリティ ポリシー (CSP) 違反を示している可能性があります:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

CSP への準拠

HTML ページ内のインライン スクリプトはデフォルトの CSP に違反しています。このポリシーでは、インライン JavaScript は許可されません。

解決策: JavaScript の分離

この問題を解決するには、HTML ファイルからすべてのインライン JavaScript を削除し、別の JavaScript ファイルに配置します。

改訂されたコード構造

hello.html (ポップアップ)ページ)

popup.js

var a = 0;
function count() {
  a  ;
  document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;

Notes

• 潜在的な XSS 脆弱性を軽減するためにテキストを変更する場合は、innerHTML を textContent に置き換えます。
• このソリューションは CSP への準拠を保証し、適切なスクリプトの実行とクリック イベントの処理を可能にします。