확장 팝업 클릭 이벤트 실패: 콘텐츠 보안 정책 위반 해결

오류 설명

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 격리

문제를 해결하려면 HTML 파일에서 모든 인라인 JavaScript를 제거하고 별도의 JavaScript 파일에 배치하세요.

수정된 코드 구조

hello.html(팝업 페이지)

popup.js

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

Notes

• 잠재적인 XSS 취약점을 완화하려면 텍스트를 변경할 때 innerHTML을 textContent로 바꾸세요.
• 이 솔루션은 CSP 준수를 보장하여 적절한 스크립트 실행 및 클릭 이벤트 처리를 가능하게 합니다.