首页 > web前端 > js教程 > 为什么我的 Chrome 扩展程序弹出点击事件不起作用?

为什么我的 Chrome 扩展程序弹出点击事件不起作用?

Susan Sarandon
发布: 2024-12-06 01:18:10
原创
404 人浏览过

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板