Tried to create a chrome plugin but JS Issue of undefined query occured

I tried to make a plugin but got the issue. Trying to solve the issue. Tried multiple projects but got the issues.
Content.js

 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
 if (request.action === "convert") {
 document.documentElement.style.filter = "grayscale(100%)";
 sendResponse({ message: "Website converted to black and white." });
  } else if (request.action === "reset") {
 document.documentElement.style.filter = "none";
 sendResponse({ message: "Website reset to original colors." });
 }
 });

popup.html

 <!DOCTYPE html>
 <html>
<head>
 <link rel="stylesheet" type="text/css" href="popup.css">
  <script src="popup.js"></script>
 </head>
  <body>
   <h1>Black & White Converter</h1>
   <button id="convertButton">Convert</button>
   <button id="resetButton">Reset</button>
  </body>
  </html>