修正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中文網其他相關文章!