Chrome 扩展弹出窗口不起作用，未处理单击事件 [英] The Chrome extension popup is not working, click events are not handled

查看：47
本文介绍了Chrome 扩展弹出窗口不起作用，未处理单击事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这是manifest.json.

<代码>{"name":"脸书","版本":"1.0","description":"我的 Facebook 个人资料","manifest_version":2,浏览器动作":{"default_icon":"google-plus-red-128.png","default_popup":"hello.html"}}

这里是html页面的代码

<头><脚本>变量 a=0;函数计数(){一个++;document.getElementById("demo").innerHTML=a;返回一个；}<身体><p id="演示">=a</p><button type="button" onclick="count()">Count</button>

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

解决方案

您的代码无法正常工作，因为它违反了默认的

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

<块引用>

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

这说明您的代码不起作用，因为它违反了默认的 CSP:内联 JavaScript不会被执行.要解决此问题，您必须从 HTML 文件中删除所有内联 JavaScript，并将其放入单独的 JS 文件中.

结果如下图:

hello.html(弹出页面)

<头><身体><p id="演示">=a</p><button type="button" id="do-count">Count</button><script src="popup.js"></script>

popup.js

var a=0;函数 计数() {一个++;document.getElementById('demo').textContent = a;}document.getElementById('do-count').onclick = count;

请注意，我已将 innerHTML 替换为 textContent.当您打算更改文本时，学习使用 textContent 而不是 innerHTML.在这个简单的例子中没有关系，但在更复杂的应用程序中，它可能会以 XSS 的形式成为安全问题.

I have created a JavaScript variable and when I click on the button it should increment by 1, but its not happening.

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

Here is the code for the html page 

<!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>

I want the extension to show me the value of a and increment it by one each time I click on the extension or the button

解决方案

Your code is not working because it violates the default Content Security Policy. I've created a screencast of one minute to show what's wrong:

First, I've shown how to debug the problem. Right-click on your popup button, and click on "Inspect popup". After doing that, you will see the following error message:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

This explains that your code is not working, because it violates the default CSP: Inline JavaScript will not be executed. To solve the problem, you have to remove all inline JavaScript from your HTML file, and put it in a separate JS file.

The result is shown below:

hello.html (popup page)

<!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;

Note that I've replaced innerHTML with textContent. Learn to use textContent instead of innerHTML when you intend to change the text. In this simple example it does not matter, but in more complex applications, it might become a security issue in the form of XSS.

这篇关于Chrome 扩展弹出窗口不起作用，未处理单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆