0

I have a HTML form in my Chrome extension to process a login page but I am receiving the following error:

Uncaught TypeError: Cannot read property 'addEventListener' of null at HTMLDocument. (popup.js:5)

I am wondering if anyone has any idea on how to fix this issue? I will attach the code below.

manifest.json

{
    "manifest_version": 2,

    "name": "UA Prototype Plugin",
    "description": "A prototype plugin for Chrome",
    "version": "1.0",
    "author": "@Curtis",

    "background": {
        "scripts": ["popup.js"],
        "persistent": false
    },
    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*"
    ],
    "browser_action": {
        "default_icon": "logo.png",
        "default_popup": "popup.html"
    }
}

popup.html

<!doctype html>
<html>
<head>
    <script src="popup.js"></script>
</head>

<body>
    <h2>Welcome to UA Browser Prototype</h2>
    <a href="test.html">test</a>
    <!-- <p id='pagetitle'>This should change to the scraped title!</p> -->
<h3>Please login to your account below</h3>


<div class="container">
     <form id="dologin">
        <p>
            <label for="title">Username</label><br />
            <input type="text" id="username" name="username" placeholder="Username" />
        </p>
        <p>
            <label for="url">Password</label><br />
            <input type="password" id="password" name="password" placeholder="Password" />
        </p>
        <p>
            <input id="submit" type="submit" value="Login" />
        </p>
    </form>

</div>
</body>
</html>

popup.js

function doLogin() {
    alert("login");
}
document.addEventListener('DOMContentLoaded', function(event) {
    document.getElementById('dologin').addEventListener('submit', dologin);
});
Curtis Boylan
  • 827
  • 1
  • 7
  • 23
  • in *document.getElementById('dologin').addEventListener('submit', dologin);* change it as document.getElementById('dologin').addEventListener('submit', doLogin); – Vishwa Apr 01 '19 at 11:10
  • You should recheck the id in `
    ` and `document.getElementById('dologin')`.....if they are same then you should not get that error:
     – Mamun Apr 01 '19 at 11:58
  • 1) remove `"background"` declaration from your manifest.json - it creates a separate empty hidden background page with popup.js inside, you don't need that. 2) either don't use `form` and `submit` or do event.preventDefault(), otherwise your popup will just reload on submitting, 3) Use the [correct devtools](https://stackoverflow.com/a/38920982) for the popup. – wOxxOm Apr 01 '19 at 13:01

0 Answers0