首頁 >web前端 >js教程 >為什麼我的 Chrome 擴充功能彈出點擊事件不起作用?

為什麼我的 Chrome 擴充功能彈出點擊事件不起作用?

Susan Sarandon
Susan Sarandon原創
2024-12-06 01:18:10398瀏覽

Why Aren't My Chrome Extension Popup Click Events Working?

修正Chrome 擴充功能彈出視窗問題:處理點擊事件

使用JavaScript 建立Chrome 擴充功能彈出視窗時,使用者可能會遇到點擊事件不可用的問題沒有正確處理。這可能是由於違反了預設的內容安全策略 (CSP)。

問題描述:

開發人員在擴充功能的內部建立了 JavaScript 變數和按鈕彈出視窗。單擊按鈕後,變數預計會增加 1。但是,代碼未按預期運行。

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

彈出頁面HTML:

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

說明:

出現此問題的原因是 HTML 檔案中存在內嵌 JavaScript。預設 CSP 禁止內聯 JavaScript。

解決方案:

要解決此問題,請將所有內嵌 JavaScript 移至單獨的 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;

附加說明:

使用修改文字內容時使用textContent而不是innerHTML,以防止潛在的安全漏洞。

以上是為什麼我的 Chrome 擴充功能彈出點擊事件不起作用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn