Home >Web Front-end >JS Tutorial >Why is my Chrome Extension Popup Button Click Event Not Working?

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

Patricia ArquetteOriginal: 2024-11-25 18:19:11591browse

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

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>

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>

popup.js:

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

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!

JavaScript json chrome html for Event JS default this issue

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Why Choose ng-bind Over {{}} Interpolation in AngularJS?Next article：Why Choose ng-bind Over {{}} Interpolation in AngularJS?

See more

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

Related articles