'Can't access chrome extension DOM elements from service worker

I'm trying to make a chrome extension that when you click a button opens a popup. I can open it with a function through the console but when connecting it to a button in the popup.html file and trying it out it gives out these errors:

First error :

enter image description here

Second error :

enter image description here

I have tried a couple of different ways to do it but none of them have worked so far. Does anyone know what the problem is with my code?

popup.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="popup.css">
    <script defer src="background.js"></script>
  </head>
  <body>
    <h2>Click to Make New Sticky Note.</h2>
    <button id="newNoteButton">Press</button>
  </body>
</html>

background.js

const newNoteButton = document.getElementById('newNoteButton')
const windowData = {
    'type': "popup",
    'url': "http://www.google.com"
}

function createNewNote() {
    chrome.windows.create(windowData)
}

newNoteButton.addEventListener('click', createNewNote())

manifest.json

{
    "name": "Sticky Froggies",
    "description": "Sticky Notes. Now with Frogs!",
    "version": "1.0",
    "manifest_version": 3,
    "background": {
      "service_worker": "background.js"
    },
    "permissions": ["tabs", "storage"],
    "action": {
      "default_popup": "popup.html"
    }
  }
javascripthtmlgoogle-chrome-extension


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions