web-dev-qa-db-ja.com

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ずつ増加させたい

picture of the extension

javascriptgoogle-chromebuttongoogle-chrome-extensioncontent-security-policy
27
Sainath

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

screencast

最初に、問題をデバッグする方法を示しました。ポップアップボタンを右クリックして、 "Inspect popup" をクリックします。それを行うと、次のエラーメッセージが表示されます。

次のコンテンツセキュリティポリシーディレクティブ「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の形でセキュリティの問題になる可能性があります。

117
Rob W

onclickを変更します：

onclick="count"

またはカウント関数を次のように変更します。

function count()
{

    var demo = document.getElementById("demo");
    return function() {
        demo.innerHTML = ++a;
    }

}

ここに私がまとめた素敵なデモがあります：

コード（これはid="the_button"ボタンに）：

window.onload = function () {
    var button = document.getElementById("the_button");
    button.onclick = count();

    function count() {
        var a = 0;
        var demo = document.getElementById("demo");
        return function () {
            demo.innerHTML = ++a;
        }
    }
}

デモ： http://jsfiddle.net/maniator/ck5Yz/

0
Neal