Chrome扩展中的onClick不起作用 [英] onClick within Chrome Extension not working
问题描述
onClick 函数没有执行应有的功能。 .js文件：
函数hellYeah（文本）{
document.getElementById （text-holder）。innerHTML = text;
}
.html文件：
<！doctype html>
< html>
< head>
< title>
快速入门Extension's Popup
< / title>
< script src =popup.js>< / script>
< / head>
< body>
< div id =text-holder>
ha
< / div>
< br />
< a onClick = hellYeah（xxx）>
hyhy
< / a>
< / body>
< / html>
因此，基本上一旦用户点击hyhy，ha就会变成xxx。再说一遍 - 它在浏览器中完美工作，但在扩展中无效。你知道为什么吗？以防万一我也在下面附上manifest.json。
预先感谢！
清单.json：
{
name：My First Extension，
version： 1.0，
manifest_version：2，
description：我做的第一个扩展。，
browser_action：{
default_icon： icon.png，
default_popup：popup.html
}，
权限：[
http://api.flickr.com/$ [b $ b]
}
不要让您拥有内联JavaScript（文档）。你必须做类似的事情。
为链接分配一个ID（< a onClick = hellYeah（xxx ）> 变成< a id =link> ），并使用 addEventListener 来绑定事件。将以下内容放入 popup.js 文件中：
document.addEventListener （'DOMContentLoaded'，function（）{
var link = document.getElementById（'link'）;
// onClick逻辑如下：
link.addEventListener（'click'，function（） {
hellYeah（'xxx'）;
}）;
}）;
This seems to be the easiest thing to do, but it's just not working. In a normal browser the .html and .js files works perfectly, but in the Chrome extension the onClick function is not performing what it's supposed to do.
.js file:
function hellYeah(text) {
document.getElementById("text-holder").innerHTML = text;
}
.html file:
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">
ha
</div>
<br />
<a onClick=hellYeah("xxx")>
hyhy
</a>
</body>
</html>
So basically once the user clicks "hyhy", "ha" should change into "xxx". And again - it works perfectly in the browser but does not work in the extension. Do you know why? Just in case I'm attaching the manifest.json below as well.
Thanks in advance!
manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
Chrome Extensions don't allow you to have inline JavaScript (documentation). You are going to have to do something similar to this.
Assign an ID to the link (<a onClick=hellYeah("xxx")> becomes <a id="link">), and use addEventListener to bind the event. Put the following in your popup.js file:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
hellYeah('xxx');
});
});
这篇关于Chrome扩展中的onClick不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
