Сбой при нажатии событий всплывающего окна расширения: устранение нарушения политики безопасности контента

Описание ошибки

В расширении Chrome нажмите события на значке расширения и кнопка на всплывающей странице не генерирует ожидаемый ответ на увеличение переменной JavaScript.

Проверка корня Причина

Чтобы устранить проблему, проверьте всплывающую страницу и журналы консоли. Сообщение об ошибке, вероятно, указывает на нарушение политики безопасности контента (CSP):

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

Нарушение совместимости CSP

Встроенные скрипты на HTML-странице нарушают CSP по умолчанию. В соответствии с этой политикой встроенный JavaScript не разрешен.

Решение: изоляция JavaScript

Чтобы решить проблему, удалите весь встроенный JavaScript из файла HTML и поместите его в отдельный файл JavaScript.

Пересмотренная структура кода

hello.html (всплывающее окно Страница)

popup.js

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

Примечания

• Замените innerHTML на textContent при изменении текста, чтобы устранить потенциальные уязвимости XSS.
• Это решение обеспечивает соответствие CSP, обеспечивая правильное выполнение сценариев и обработку событий кликов.