button click not working in google extension

Question

hi i am making chrome extension which redirect to my website and fill password automatically. I am not able to submit button click event.

manifest.json  // manifest json code 

{
  "name": "z",
  "version": "0.1",
  "description": "z",
  "background": { 

     "scripts":["redirect.js"]
     },
   "manifest_version": 2,
  "permissions": [
    "http://Abcd:90/Login.aspx"
  ],
  "browser_action": {
      "default_icon": {                    
        "19": "icon.png"  //you have to put an image icon.png in to the folder.                 
      },
      "default_title": "Redirect" //optional 
   }

}   


----------------------------redirect.js------------------

//tried

 chrome.browserAction.onClicked.addListener(function(tab) {

        debugger
        chrome.tabs.create({ url: "http://Abcd:90/Login.aspx" });

            hello();


});


    function hello() {

        debugger
        var myUsername = 'username';
        var myPassword = 'password';
        // find the fiends in your lo
        document.getElementsByName('ctlLogin$UserName').value = myUsername;
        document.getElementsByName('ctlLogin$Password').value = myPassword;
        var link = document.getElementById('ctlLogin_LoginButton');      
        link.addEventListener('DOMContentLoaded', function () {   // unable to perform click.
            var link = document.getElementByName('ctlLogin$LoginButton');
            // onClick's logic below:
            alert(link);
            link.addEventListener('click', function () {
                hellYeah('xxx');
            });
        });

// tried this also

   var link = document.getElementById('ctlLogin_LoginButton');
        link.addEventListener('click', function () {
            alert('gg');
        });

    }

// also this

document.addEventListener('DOMContentLoaded', function () {
         document.querySelector('ctlLogin_LoginButton').addEventListener('click', showalert, false);
 }, false);

 function showalert() {
     alert("you just pressed the button");
 }

Answer 1

Try the following snippet:

In XML:

<input id="ctlLogin_LoginButton" type="submit" value="Submit">

This script should attach events to the elements once the popup document body is loaded.

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("ctlLogin_LoginButton").addEventListener("click", hello);
});

You can also check this related question: onClick within Chrome Extension not working

Hope this helps!

Answer 2

Append the handler to any existing element

$(document).on("click","#ctlLogin_LoginButton",function(e) {
    console.log("button clicked");
})