Chrome扩展程序-popup.html中的按钮 [英] Chrome Extensions - Button in popup.html
问题描述
首先，我不是专业程序员，只是玩了一点. 我尝试编写一些Chrome扩展程序来管理其他扩展程序. 但是我已经无法创建一个按钮，在该按钮上我可以单击某件事. 我的主要问题是，在尝试获取elementbyid时，它返回NULL并以addEventListener失败. 也许我只是愚蠢地看到问题.我添加了DOMContentLoaded，因为有人写道，内容的加载存在问题.
First, i'm no professional programmer, just playing a little bit around. I tried to write a little Chrome Extension to manage other Extensions. But i already failed to create a button, on which i can click an something happens. My main problem is, that while trying to get the elementbyid, it returns NULL and fails with the addEventListener. Maybe i'm just to stupid to see the problem. I added the DOMContentLoaded, because someone wrote there is a problem with the loading of the content.
谢谢您的帮助.
popup.js
var bgp = chrome.extension.getBackgroundPage()
var arr = []; // the array
document.addEventListener('DOMContentLoaded', function () {
var tbinput = document.getElementById("tbinput");
var btadd = document.getElementById("btadd");
btadd.addEventListener('click', addItems());
};
function addItems(){
arr.push(input.value); // add textbox value to array
input.value = ''; // clear textbox value
};
popup.html
<!doctype html>
<!--
This page is shown when the extension button is clicked, because the
'browser_action' field in manifest.json contains the 'default_popup' key with
value 'popup.html'.
-->
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
-->
<script src='popup.js'></script>
</head>
<body>
<input type='text' id='tbinput'>
<br>
<input type='button' id='btadd' value='Add'>
<br>
<input type='button' id='view' value='View all Contents'>
<br>
<input type='text' id='output'>
</body>
</html>
manifest.json
{
"name": "Extensions Manager",
"description": "Random",
"version": "2.0",
"permissions": [
"management"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Extensions Manager",
"default_popup":"popup.html"
},
"manifest_version": 2
}
推荐答案
您正在触发addItems函数，而不是将其传递给addEventListener方法.
You're triggering the addItems function instead of passing it to the addEventListener method.
btadd.addEventListener('click', addItems()); // addItems() should be addItems
另一个问题是您的DOMContentLoaded侦听器，无法正确关闭:
Another problem is with your DOMContentLoaded listener, it isn't closed properly:
}; // This should be });
var arr = []; // the array
var tbinput;
document.addEventListener('DOMContentLoaded', function() {
tbinput = document.getElementById("tbinput");
document.getElementById("btadd").addEventListener('click', addItems);
});
function addItems() {
arr.push(tbinput.value); // add textbox value to array
tbinput.value = ''; // clear textbox value
};
<input type='text' id='tbinput'>
<br>
<input type='button' id='btadd' value='Add'>
<br>
<input type='button' id='view' value='View all Contents'>
<br>
<input type='text' id='output'>
这篇关于Chrome扩展程序-popup.html中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
