Chrome扩展程序-popup.html中的按钮

Question

First, i'm no professional programmer, just playing a little bit around. 首先，我不是专业的程序员，只是玩一点。 I tried to write a little Chrome Extension to manage other Extensions. 我尝试编写一些Chrome扩展程序来管理其他扩展程序。 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. 我的主要问题是，在尝试获取elementbyid时，它返回NULL并以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. 我添加了DOMContentLoaded，因为有人写道，内容的加载存在问题。

Thank you for your help. 谢谢您的帮助。

popup.js 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 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 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

You're triggering the addItems function instead of passing it to the addEventListener method. 您正在触发addItems函数，而不是将其传递给addEventListener方法。

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

Another problem is with your DOMContentLoaded listener, it isn't closed properly: 另一个问题是您的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 个解决方案

解决方案1
6 已采纳 2015-07-13 09:50:24

Chrome扩展程序-popup.html中的按钮

问题描述

1 个解决方案

解决方案1 6 已采纳 2015-07-13 09:50:24

解决方案1
6 已采纳 2015-07-13 09:50:24