JavaScript

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.

Thank you for your help.

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

You’re triggering the addItems function instead of passing it to the addEventListener method.

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

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 Extensions – Button in popup.html

Advertisement

Answer