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

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

Patricia Arquette

リリース： 2024-11-25 18:19:11

オリジナル

586 人が閲覧しました

Why is my Chrome Extension Popup Button Click Event Not Working?

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

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ページ):

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

ログイン後にコピー

調査:

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

解決策:

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

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;

ログイン後にコピー

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

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

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

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