Why is my Chrome Extension Popup Button Click Event Not Working?-JS Tutorial-php.cn

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

Patricia Arquette

Release： 2024-11-25 18:19:11

Original

655 people have browsed it

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

Troubleshooting Extension Popups with Disabled Click Events

When developing Chrome extensions, it's possible to encounter situations where the popup is unresponsive or mouse click events are not handled. This issue can prevent the extension from functioning properly.

Problem Description:

A user has created a Chrome extension popup that includes a button to increment a variable on click. However, the button click is not triggering the expected behavior of incrementing the variable. The manifest.json file and the HTML page code for the popup are provided:

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

Copy after login

hello.html (Popup Page):

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

Copy after login

Investigation:

The investigation reveals that the issue is due to the default Content Security Policy (CSP) enforced by Chrome. The CSP prohibits inline JavaScript execution, which is used in the popup HTML page to handle the click event.

Solution:

To resolve the issue, the inline JavaScript from the HTML file is removed and placed in a separate JS file:

hello.html (Popup Page):

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p>

Copy after login

popup.js:

var a=0;
function count() {
  a++;
  document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;

Copy after login

With this change, the popup will now increment the variable as expected when the button is clicked.

The above is the detailed content of Why is my Chrome Extension Popup Button Click Event Not Working?. For more information, please follow other related articles on the PHP Chinese website!