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

Chrome 확장 팝업이 작동하지 않음: 클릭 이벤트가 처리되지 않음

Chrome 확장 팝업에서 클릭 이벤트가 처리되지 않는 문제를 해결하려면, 원인과 해결 방법을 알아보겠습니다.

문제 설명:

제공된 코드와 같이 팝업의 HTML 페이지에서 인라인 JavaScript를 사용하면 Chrome 확장 프로그램에서 시행하는 기본 콘텐츠 보안 정책(CSP)과 충돌할 수 있습니다. 이 정책은 보안상의 이유로 인라인 스크립트 실행을 제한합니다. 결과적으로 클릭 이벤트 처리를 담당하는 JavaScript 코드가 실행되지 않아 버튼이 작동하지 않거나 기타 클릭 기반 상호 작용이 발생할 수 있습니다.

해결책:

이 문제를 해결하려면 다음 단계를 따르세요.

1. 인라인 JavaScript 제거: 제거 팝업의 HTML 페이지에 있는 모든 인라인 JavaScript.
2. 별도의 JavaScript 파일 만들기: 클릭 이벤트 및 기타 기능을 처리하는 JavaScript 코드를 별도의 JavaScript 파일(예: popup.js)에 넣습니다. ).
3. JavaScript 파일 포함: 포함할 팝업의 HTML 페이지에 HTML 스크립트 태그를 추가합니다. 외부 JavaScript 파일입니다.

업데이트된 코드 조각은 다음과 같습니다.

hello.html(팝업 페이지):

...
<button type="button">

popup.js:

var a = 0;

function count() {
  a++;
  document.getElementById('demo').textContent = a;
}

document.getElementById('do-count').onclick = count;

참고:

추가로, 매니페스트.json 파일이 팝업 HTML 페이지를 올바르게 지정하고 관련 항목을 포함하는지 확인하세요. 권한:

manifest.json:

...
"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "hello.html",
  "permissions": ["activeTab"]
}
...

다음 단계를 따르면 다음 단계를 준수하면서 Chrome 확장 팝업 내에서 클릭 이벤트가 올바르게 처리되도록 할 수 있습니다. 보안 모범 사례에 대한 Chrome CSP 가이드라인

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