Question

首先，我不是专业程序员，只是玩一点点。我尝试编写一个小的Chrome扩展程序来管理其他扩展程序。但我已经无法创建一个按钮，我可以点击一个发生的事情。我的主要问题是，在尝试获取elementbyid时，它返回NULL并使用addEventListener失败。也许我只是愚蠢地看到问题。我添加了DOMContentLoaded，因为有人写道，加载内容存在问题。

感谢您的帮助。

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
}

Answer 1

您正在触发addItems功能，而不是将其传递给addEventListener方法。

btadd.addEventListener('click', addItems()); // addItems() should be addItems

另一个问题是你的DOMContentLoaded监听器，它没有正确关闭：

}; // 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中的按钮

1 个答案: