Chrome 拡張機能のポップアップのクリックイベントが発生しないのはなぜですか?-jsチュートリアル-php.cn

Chrome 拡張機能のポップアップのクリックイベントが発生しないのはなぜですか?

Susan Sarandon

リリース： 2024-11-26 06:51:14

オリジナル

431 人が閲覧しました

Why Aren't My Chrome Extension Popup's Click Events Firing?

Chrome 拡張機能のポップアップクリックイベントが発生しない: コンテンツセキュリティポリシー違反の解決

Chrome 拡張機能のポップアップがボタンのクリックに応答せず、意図された動作。原因は、ブラウザによって適用されるデフォルトのコンテンツセキュリティポリシー (CSP) にあります。

問題を理解する

問題をデバッグするには、ポップアップボタンを右クリックしてくださいをクリックして「ポップアップを検査」を選択します。インラインスクリプトが「script-src」CSP ディレクティブに違反していることを示すエラーメッセージが表示されます。これは、クリックイベントがトリガーされない理由の説明です。

解決策: JavaScript コードの分離

問題を修正するには、すべてのインライン JavaScript コードを HTML ファイルから別のファイルに移動します。 JSファイル。これは、HTML ドキュメントからスクリプトを分離することで CSP 要件に従います。

改訂コード:

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>

ログイン後にコピー

popup.js

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

ログイン後にコピー

注: を使用する場合は、innerHTML を textContent に置き換えます。テキストを修正します。この例ではこれは重要ではありませんが、複雑なアプリケーションのセキュリティ強化 (XSS 軽減) のために textContent を使用することをお勧めします。

以上がChrome 拡張機能のポップアップのクリックイベントが発生しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Chrome 拡張機能のポップアップのクリック イベントが発生しないのはなぜですか?