> 웹 프론트엔드 > JS 튜토리얼 > 내 Chrome 확장 프로그램 팝업의 클릭 이벤트가 실행되지 않는 이유는 무엇입니까?

내 Chrome 확장 프로그램 팝업의 클릭 이벤트가 실행되지 않는 이유는 무엇입니까?

Susan Sarandon
풀어 주다: 2024-11-26 06:51:14
원래의
504명이 탐색했습니다.

Why Aren't My Chrome Extension Popup's Click Events Firing?

Chrome 확장 프로그램 팝업 클릭 이벤트가 실행되지 않음: 콘텐츠 보안 정책 위반 해결

Chrome 확장 프로그램 팝업이 버튼 클릭에 응답하지 않아 의도된 행동. 원인은 브라우저에서 시행하는 기본 콘텐츠 보안 정책(CSP)에 있습니다.

문제 이해

문제를 디버깅하려면 팝업 버튼을 마우스 오른쪽 버튼으로 클릭하세요. '팝업 검사'를 선택하세요. 인라인 스크립트가 "script-src" CSP 지시문을 위반한다는 오류 메시지가 표시됩니다. 이는 클릭 이벤트가 실행되지 않는 이유를 설명합니다.

해결책: JavaScript 코드 분리

문제를 해결하려면 HTML 파일의 모든 인라인 JavaScript 코드를 별도의 코드로 이동하세요. JS 파일. 이는 HTML 문서에서 스크립트를 분리하여 CSP 요구 사항을 따릅니다.

수정된 코드:

hello.html(팝업 페이지)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
로그인 후 복사

popup.js

var a = 0;
function count() {
    a++;
    document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;
로그인 후 복사

참고: 원하는 경우 innerHTML을 textContent로 바꾸세요. 텍스트를 수정합니다. 이 예에서는 이것이 중요하지 않지만 복잡한 애플리케이션에서는 보안 강화(XSS 완화)를 위해 textContent를 사용하는 것이 좋습니다.

위 내용은 내 Chrome 확장 프로그램 팝업의 클릭 이벤트가 실행되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿