Chrome 확장 프로그램 팝업 버튼 클릭 이벤트가 작동하지 않는 이유는 무엇입니까?-JS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-11-25 18:19:11

원래의

610명이 탐색했습니다.

Why is my Chrome Extension Popup Button Click Event Not Working?

클릭 이벤트가 비활성화된 확장 프로그램 팝업 문제 해결

Chrome 확장 프로그램을 개발할 때 팝업이 응답하지 않거나 마우스 클릭 이벤트가 발생하는 상황이 발생할 수 있습니다. 처리되지 않습니다. 이 문제로 인해 확장 프로그램이 제대로 작동하지 않을 수 있습니다.

문제 설명:

사용자가 클릭 시 변수를 증가시키는 버튼이 포함된 Chrome 확장 프로그램 팝업을 만들었습니다. 그러나 버튼 클릭으로 인해 예상되는 변수 증가 동작이 실행되지 않습니다. 팝업을 위한 Manifest.json 파일과 HTML 페이지 코드가 제공됩니다:

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"
  }
}

로그인 후 복사

hello.html(팝업 페이지):

<!DOCTYPE html>
<html>
  <head>
    <script>
      var a=0;
      function count()
      {
        a++;
        document.getElementById("demo").innerHTML=a;
        return a;
      }
    </script>
  </head>
  <body>
    <p>

로그인 후 복사

조사:

조사 결과 이 문제는 Chrome에서 시행하는 기본 콘텐츠 보안 정책(CSP)으로 인해 발생하는 것으로 나타났습니다. CSP는 팝업 HTML 페이지에서 클릭 이벤트를 처리하는 데 사용되는 인라인 JavaScript 실행을 금지합니다.

해결책:

이 문제를 해결하려면 HTML 파일이 제거되고 별도의 JS 파일에 배치됩니다:

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;

로그인 후 복사

이 변경으로 인해 팝업은 이제 버튼을 누를 때 예상대로 변수를 증가시킵니다. 클릭했습니다.

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