I am trying to build a chrome extension that toggles a large header on a certain website. I have code that I have verified performs the toggling when I code it into a test website. I am plugging it into my extension, but it is still not toggling. Why won't it toggle?

Manifest
Code:
{
    "manifest_version": 2,
  
    "name": "My extension",
    "description": "Start action in background from popup.",
    "version": "2.0",
  
      "browser_action": {
      "default_title": "My extension",
      "default_popup": "popup.html"
    },

    "permissions": ["tabs"],
  
    "background": {
      "scripts": ["event.js"]
    }
  }
popup.js
Code:
chrome.runtime.sendMessage({text: "popup opened"});
popup.html
Code:
<!DOCTYPE html>
<html>
<head>
    <script src="popup.js"></script>
</head>
<body>
<p>Background page has been notified</p>
</body>
</html>
events.js
Code:
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
    if (message.text == "popup opened") {
        console.log ("Popup says it was opened.");
        // Run your script from here
    }
    let x = window.document.getElementById("fixedTop");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }

    
});