Chrome 扩展程序弹出窗口不起作用,点击事件未处理

2023-12-13

我创建了一个 JavaScript 变量,当我单击按钮时,它应该增加 1,但它没有发生。

Here's 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 id="demo">=a</p>
<button type="button" onclick="count()">Count</button>
</body>
</html>

我希望扩展程序向我显示 a 的值,并在每次单击扩展程序或按钮时将其加一

picture of the extension


您的代码无法正常工作,因为它违反了默认值内容安全政策。我创建了一个一分钟的截屏视频来显示问题所在:

screencast

首先,我展示了如何调试问题。右键单击弹出按钮,然后单击“检查弹出窗口”。执行此操作后,您将看到以下错误消息:

拒绝执行内联脚本,因为它违反了以下内容安全策略指令:“script-src 'self' chrome-extension-resource:”。

这说明您的代码无法正常工作,因为它违反了默认的 CSP:内联 JavaScript 将不会被执行。要解决这个问题,您必须从 HTML 文件中删除所有内联 JavaScript,并将其放入单独的 JS 文件中。

结果如下所示:

hello.html(弹出页面)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo">=a</p>
<button type="button" id="do-count">Count</button>
<script src="popup.js"></script>
</body>
</html>

popup.js

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

注意我已经替换了innerHTML with textContent。学习使用textContent代替innerHTML当您打算更改文本时。在这个简单的示例中,这并不重要,但在更复杂的应用程序中,它可能会成为 XSS 形式的安全问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Chrome 扩展程序弹出窗口不起作用,点击事件未处理 的相关文章

  • 当已经使用 id“org.springframework.boot”插件时,我们是否需要“io.spring.dependency-management”gradle 插件

    当 spring boot 插件添加到 Gradle 项目时会发生什么 为什么我们还需要显式包含 spring dependency management 插件 plugins id org springframework boot ver
  • GLSL:检查是否支持扩展

    您不能使用不受支持的扩展 驱动程序将返回编译错误 但是您可以直接从 GLSL 代码检查某些扩展的可用性吗 有这样的事吗 version XXX core if supported EXT some extension extension E
  • Android:“无法初始化可视化引擎”

    我三天前开始为 Android 编程 今天我想使用 android Api 中的一些类来做一些更困难的事情 我找到了 Visualizer 类 第一次尝试时遇到了问题 我在不同论坛上读到很多帖子 人们有同样的问题 无法初始化可视化引擎 我将
  • Node.js 和 npm phoenix-client 包与 Kerberized Apache phoenix 的连接

    我正在尝试将 Kerberized Apache phoenix 与 node js 上的 npm jdbc 包连接起来 kerberized apache phoenix 的 node js 和 npm jdbc 包问题 https st
  • 是否可以在 AlertDialog 中自定义正向和负向按钮?

    是否可以在 AlertDialog 中自定义正向和负向按钮 我需要用自定义替换默认的正面和负面外观 setPositiveButton android R string ok new DialogInterface OnClickListe
  • React Native - 图像缓存

    我阅读了该站点中有关 React Native 图像组件的文档并得到了一些问题 https facebook github io react native docs image html https facebook github io r
  • 如何更新 AngularJS 中的元标记?

    我正在使用 AngularJS 开发一个应用程序 我想更新路线更改的元标记 如何更新 AngularJS 中可以在页面上的 查看源代码 中显示的元标记 这是一段 HTML 代码
  • Doctest 返回失败,但“预期”和“得到”完美匹配

    我正在尝试做列表部分的第二个练习 http www openbookproject net thinkcs python english2e ch09 html exercises 如何像计算机科学家一样思考 一书的内容 我基本上必须将给定
  • JQuery 循环遍历动态元素并获取数据值

    我正在尝试使用可折叠面板来完成我的要求 sport on click function var thisId this attr id var thisChildren this sportlist thisChildren each fu
  • Android 上方向改变时如何避免重新启动 Activity

    我正在创建一个 Android 应用程序 在其中在画布上绘制视图 当设备的方向改变时 活动将重新启动 我不想这样 如何避免在方向改变时重新启动 Activity 有多种方法可以做到这一点 但正如给定的here https stackover
  • 如何水平和垂直对齐内联块

    什么是最好 最干净的使用CSS对齐 dates div位于标题的右侧 垂直于中间 I tried float right 但这不允许vertical align 我想避免使用浮动 所以我使用inline block 并使用相对定位 有没有更
  • 如何防止外部 CSS 添加和覆盖 ReactJS 组件样式

    我有一个自定义的 ReactJS 组件 我想以某种方式设置样式 并将其作为插件提供给许多不同的网站 但是 当网站使用全局样式 Twitter bootstrap 或其他 css 框架 时 它会添加并覆盖我的组件的样式 例如 全局 css l
  • 针对字段的 Elasticsearch 匹配列表

    我有一个列表 数组或任何你熟悉的语言 例如 姓名 John Bas Peter 我想查询name字段 如果它与这些名称之一匹配 一种方法是使用 OR 过滤器 例如 filtered query match all filter or ter
  • OSX 的网络连接 NSNotification?

    我只需要在分配有效 IP 地址时发出通知即可 我尝试过通过 SCreachability 进行轮询 但这似乎效率低下 有什么建议么 这看起来应该很简单 但我已经努力了几个小时才能让任何东西发挥作用 我知道这有点旧 但所选的答案并不理想 SC
  • 将画布下载为 PNG 图像[重复]

    这个问题在这里已经有答案了 当我尝试将画布下载为 PNG 图像时 浏览器会在新页面中打开该图像 但不下载它 我的下载代码 btnScaricaEtichetta click function console log Download loc
  • 定义应保存 user.config 文件的自定义路径?

    如果我重命名我编译的应用程序 例如myapp exe to app exe然后 当我运行重命名的可执行文件时 会在此路径中生成新的用户设置文件夹 C Users User AppData Local CompanyName Executab
  • 如何避免在 Scala 中编写令人困惑的 DSL

    我读过一些评论 指出 Scala 的灵活性使开发人员可以轻松编写难以理解和推理的 DSL DSL 之所以成为可能 是因为 we can 有时 https stackoverflow com q 1181533 5986907 omit 和括
  • 表格单元格中 ::after 上的位置在 Firefox 中不起作用?

    以下代码应创建一个跨越其父元素宽度 100 的伪元素 然而 这在 Firefox 中不起作用 但在 Chrome 中却有效 火狐浏览器似乎忽略了 parent s position relative 这是一个错误吗 HTML div cla
  • 如何使相对div居中?

    我一直在尝试让以下代码工作几个小时 但没有成功 您能帮我将项目 div 居中吗 即使页面放大和缩小时 这是我的 HTML 和 CSS bottom position absolute top 100 left 0 right 0 backg
  • SQLDroid 和加密数据库

    我的应用程序有一个已经存在的数据库 已经存在 是指我不在我的应用程序中创建数据库 我只是连接到它并读取数据 为了设置连接 我使用 SQLDroid 现在我想知道是否有可能使用 SQLDroid 加密我的数据库 否则我的数据库未加密 任何人都

随机推荐