為什麼我的 Chrome 擴充功能彈出按鈕點擊事件不起作用？-js教程-PHP中文網

首頁

web前端

js教程

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

Patricia Arquette

Nov 25, 2024 pm 06:19 PM

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（Popup頁）：

<!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 禁止內嵌 JavaScript 執行，該內嵌 JavaScript 在彈出 HTML 頁面中用於處理點擊事件。

解決方案：

要解決此問題，請使用內嵌JavaScript HTML 檔案被刪除並放置在單獨的JS 檔案中：

hello.html (Popup Page):

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

本網站聲明

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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1653

CakePHP 教程

1413

Laravel 教程

1304

PHP教程

1251

C# 教程

1224

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。