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

Chrome 拡張機能ポップアップが機能しない: クリック イベントが処理されない

Chrome 拡張機能ポップアップでクリック イベントが処理されない問題を解決するには、原因と解決策を詳しく見てみましょう。

問題説明:

提供されたコードなど、ポップアップの HTML ページでインライン JavaScript が使用されている場合、Chrome 拡張機能によって適用されるデフォルトのコンテンツ セキュリティ ポリシー (CSP) と競合する可能性があります。このポリシーは、セキュリティ上の理由からインライン スクリプトの実行を制限します。その結果、クリック イベントの処理を担当する JavaScript コードが実行されず、機能しないボタンやその他のクリックベースのインタラクションが発生する可能性があります。

解決策:

この問題に対処するには、次の手順に従います。

1. インラインを削除JavaScript: ポップアップの HTML ページに存在するインライン JavaScript をすべて削除します。
2. 別の JavaScript ファイルを作成: クリック イベントやその他の機能を処理する JavaScript コードを別の JavaScript ファイルに配置します。 (例: Popup.js)。
3. JavaScript を含めます。ファイル: ポップアップの HTML ページに HTML スクリプト タグを追加して、外部 JavaScript ファイルを含めます。

更新されたコード スニペットは次のとおりです:

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

...
<button type="button">

popup.js:

var a = 0;

function count() {
  a++;
  document.getElementById('demo').textContent = a;
}

document.getElementById('do-count').onclick = count;

注:

さらに、マニフェスト.json ファイルがポップアップ HTML ページを正しく指定し、関連する内容が含まれていることを確認してください。権限:

manifest.json:

...
"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "hello.html",
  "permissions": ["activeTab"]
}
...

次の手順に従うことで、Chrome 拡張機能ポップアップ内でクリック イベントが正しく処理されるようにするとともに、セキュリティのベスト プラクティスに関する Chrome CSP ガイドライン。

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