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

クリック イベントが無効になっている拡張機能ポップアップのトラブルシューティング

Chrome 拡張機能を開発する場合、ポップアップが応答しなくなったり、マウス クリック イベントが発生したりする状況が発生する可能性があります。は取り扱っておりません。この問題により、拡張機能が適切に機能しなくなる可能性があります。

問題の説明:

ユーザーが、クリック時に変数をインクリメントするボタンを含む Chrome 拡張機能ポップアップを作成しました。ただし、ボタンをクリックしても、変数がインクリメントされるという予期された動作がトリガーされません。 manifest.json ファイルとポップアップの HTML ページ コードが提供されます。

manifest.json:

{
  "name":"Facebook",
  "version":"1.0",
  "description":"My Facebook Profile",
  "manifest_version":2,
  "browser_action":{
    "default_icon":"google-plus-red-128.png",
    "default_popup":"hello.html"
  }
}

hello.html (Popupページ):

  
    <script>
      var a=0;
      function count()
      {
        a++;
        document.getElementById("demo").innerHTML=a;
        return a;
      }
    </script>
  
  
    <p></p>

調査:

調査の結果、この問題は Chrome によって適用されるデフォルトのコンテンツ セキュリティ ポリシー (CSP) が原因であることが判明しました。 CSP は、クリック イベントを処理するためにポップアップ HTML ページで使用されるインライン JavaScript の実行を禁止しています。

解決策:

この問題を解決するには、 HTML ファイルが削除され、別の JS ファイルに配置されます:

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

  <p></p>

popup.js:

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

この変更により、ポップアップは次の場合に期待どおりに変数をインクリメントするようになりました。ボタンがクリックされました。

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