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

javascript google-chrome button google-chrome-extension content-security-policy

37376 просмотра

2 ответа

482 Репутация автора

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

изображение расширения

Автор: Sainath Источник Размещён: 11.07.2013 07:18

Ответы (2)

0 плюса

117041 Репутация автора

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

Автор: Neal Размещён: 11.07.2013 07:20

119 плюса

285602 Репутация автора

Решение

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

скринкаст

Сначала я показал, как отладить проблему. Щелкните правой кнопкой мыши по всплывающей кнопке и выберите «Проверить всплывающее окно» . После этого вы увидите следующее сообщение об ошибке:

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

Это объясняет, что ваш код не работает, потому что он нарушает CSP по умолчанию: встроенный JavaScript не будет выполняться . Чтобы решить эту проблему, вы должны удалить весь встроенный JavaScript из вашего HTML-файла и поместить его в отдельный файл JS.

Результат показан ниже:

hello.html (всплывающая страница)

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

popup.js

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

Обратите внимание, что я заменил innerHTMLна textContent. Научитесь использовать textContentвместо того, innerHTMLкогда вы собираетесь изменить текст. В этом простом примере это не имеет значения, но в более сложных приложениях это может стать проблемой безопасности в форме XSS.

Автор: Rob W Размещён: 12.07.2013 10:36
Вопросы из категории :
32x32