Browser Extension JavaScript Events Not Working in Popup Window

Other Questions JavaScript
1

I’m building a browser extension and having trouble getting JavaScript to work properly in the popup. I made a basic page that switches between login and logout screens using JavaScript functions, but when I try to use it as an extension popup it doesn’t work.

The main issue seems to be that extensions don’t allow inline JavaScript events like onClick. I’ve been reading the documentation but I’m still confused about how to properly handle events in manifest version 2.

Here’s my current code:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Extension Popup</title>
  <script src="popup.js"></script>
  <style>
    #logout-section {
      display: none;
    }
  </style>
</head>
<body>
  <!-- Login Form -->
  <div id="login-section">
    <form>
      Email: <input type="text" id="email"><br>
      Password: <input type="password" id="password"><br>
      <input type="button" value="Login" id="login-btn" />
    </form>
  </div>
  
  <!-- Logout Section -->
  <div id="logout-section">
    You are logged in.<br>
    <button id="logout-btn">Logout</button>
  </div>
</body>
</html>

JavaScript:

function handleLogin() {
  document.getElementById("login-section").style.display = "none";
  document.getElementById("logout-section").style.display = "block";
}

function handleLogout() {
  document.getElementById("login-section").style.display = "block";
  document.getElementById("logout-section").style.display = "none";
}

How do I properly connect these functions to the buttons without using inline event handlers?

2

had this exact same problem last week! make sure your manifest.json has the right permissions and content_security_policy set up. also try using querySelector instead of getElementById sometimes - worked for me when regular getelementbyid was being weird in the popup enviroment.

3

To resolve the issue you are facing, you should add event listeners after the DOM has fully loaded. This is necessary because the script runs before the HTML elements are created in the popup. One effective solution is to wrap your event listener code within a ‘DOMContentLoaded’ event or place the script tag at the bottom of your HTML body. For instance:

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('login-btn').addEventListener('click', handleLogin);
  document.getElementById('logout-btn').addEventListener('click', handleLogout);
});

function handleLogin() {
  document.getElementById("login-section").style.display = "none";
  document.getElementById("logout-section").style.display = "block";
}

function handleLogout() {
  document.getElementById("login-section").style.display = "block";
  document.getElementById("logout-section").style.display = "none";
}

This method guarantees that the elements exist before you attempt to attach the listeners.

4

Another approach that works well is moving your script tag to the bottom of the body instead of the head section. This way, your JavaScript executes after all DOM elements are already loaded, eliminating timing issues. I ran into the same problem when building my first extension and this simple change fixed everything. Your popup.js would then look like: javascript document.getElementById('login-btn').addEventListener('click', handleLogin); document.getElementById('logout-btn').addEventListener('click', handleLogout); function handleLogin() { document.getElementById("login-section").style.display = "none"; document.getElementById("logout-section").style.display = "block"; } function handleLogout() { document.getElementById("login-section").style.display = "block"; document.getElementById("logout-section").style.display = "none"; } Just remember to move the script tag right before the closing body tag. This approach is often simpler than using DOMContentLoaded events for basic popup functionality.