Всплывающее окно расширения Chrome не работает, события нажатия не обрабатываются
37376 просмотра
2 ответа
Я создал переменную 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 и увеличивало его на единицу каждый раз, когда я нажимал на расширение или кнопку
Ответы (2)
119 плюса
Ваш код не работает, потому что он нарушает Политику безопасности контента по умолчанию . Я создал скринкаст за одну минуту, чтобы показать, что не так:
Сначала я показал, как отладить проблему. Щелкните правой кнопкой мыши по всплывающей кнопке и выберите «Проверить всплывающее окно» . После этого вы увидите следующее сообщение об ошибке:
Отказался от выполнения встроенного сценария, поскольку он нарушает следующую директиву политики безопасности содержимого: "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.
0 плюса
Измените свой 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Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- google-chrome Как запустить JavaScript-отладчик в Google Chrome?
- google-chrome Получить реальную ширину и высоту изображения с помощью JavaScript? (в Safari / Chrome)
- google-chrome Почему Chrome сообщает о безопасном / небезопасном предупреждении, если нет других браузеров?
- google-chrome Click event on select option element in chrome
- button Как заставить кнопку выглядеть так, как будто она нажата?
- button Нажать кнопку «JavaScript» на кнопке «Ввод» в текстовом поле.
- button YUI Меню расположено позади div
- button Добавление кнопки в ListView в WinForms
- google-chrome-extension Расширение Chrome: Как сохранить файл на диске
- google-chrome-extension JavaScript: позволить пользователю выбрать элемент HTML, например, Firebug?
- google-chrome-extension Есть слушатель изменения DOM JavaScript / jQuery?
- google-chrome-extension Как автоматически перезагрузить расширение Chrome, которое я разрабатываю?
- content-security-policy Блокирует ли Политика безопасности контента закладки?
- content-security-policy Отладка нарушения CSP в Google Chrome
- content-security-policy Политика безопасности контента в поддержке IE
- content-security-policy Настройки политики безопасности контента Firebase + Chrome?