Chrome拡張機能のポップアップが機能せず、クリックイベントが処理されない

サイナス：

JavaScript変数を作成しました。ボタンをクリックすると、1ずつ増加するはずですが、実行されません。

こちら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"
  }
}

これがhtmlページのコードです

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

拡張機能でaの値を表示し、拡張機能またはボタンをクリックするたびに値を1ずつ増やしたい

拡張機能の画像

ロブW：

デフォルトのコンテンツセキュリティポリシーに違反しているため、コードは機能していません。何が問題なのかを示すために、1分のスクリーンキャストを作成しました。

最初に、問題をデバッグする方法を示しました。ポップアップボタンを右クリックし、[ポップアップを検査 ]をクリックします。その後、次のエラーメッセージが表示されます。

次のコンテンツセキュリティポリシーディレクティブ「script-src 'self' chrome-extension-resource：」に違反しているため、インラインスクリプトの実行を拒否しました。

これは、コードが既定のCSPに違反しているため、コードが機能していないことを示しています。インラインJavaScriptは実行されません。この問題を解決するには、HTMLファイルからすべてのインラインJavaScriptを削除して、別のJSファイルに配置する必要があります。

結果を以下に示します。

`hello.html` （ポップアップページ）

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo">=a</p>
<button type="button" id="do-count">Count</button>
<script src="popup.js"></script>
</body>
</html>

`popup.js`

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

私は交換してきたことに注意してくださいinnerHTMLとtextContent。テキストを変更する場合のtextContent代わりに使用する方法を学びinnerHTMLます。この単純な例では問題ではありませんが、より複雑なアプリケーションでは、XSSの形でセキュリティの問題になる可能性があります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2020-07-31

コメントを追加

サインイン

TOP 一覧

記事