Всплывающее окно расширения Chrome не работает, события click не обрабатываются

Я создал переменную 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 и увеличивало его на каждый раз, когда я нажимаю на расширение или кнопку

picture of the extension

Ответы

Ответ 1

Ваш код не работает, поскольку он нарушает стандартную политику безопасности контента. Я создал скринкаст одной минуты, чтобы показать, что не так:

screencast

Во-первых, я показал, как отладить проблему. Щелкните правой кнопкой мыши на своей всплывающей кнопке и нажмите "Inspect popup" . После этого вы увидите следующее сообщение об ошибке:

Отказаться от выполнения inline script, поскольку он нарушает следующую директиву политики безопасности содержимого: "script -src" self "chrome-extension-resource:".

Это объясняет, что ваш код не работает, потому что он нарушает CSP по умолчанию: Inline JavaScript не будет выполнен. Чтобы решить эту проблему, вам необходимо удалить весь встроенный JavaScript из вашего HTML файла и поместить его в отдельный файл 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.

Ответ 2

Измените свой 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/