2

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"
    }
  }
Debug Diva
  • 26,058
  • 13
  • 70
  • 123
pizzalawl
  • 43
  • 8
  • Does this answer your question? [How to access the webpage DOM rather than the extension page DOM?](https://stackoverflow.com/questions/4532236/how-to-access-the-webpage-dom-rather-than-the-extension-page-dom) – Ali Khoshgoftar Apr 25 '22 at 04:05
  • 2
    `Service Workers` are running on a different thread. It doesn't have direct access to `DOM`. Instead, You need to send a message to the `main` thread and update `DOM` from `main`. – BadPiggie Apr 25 '22 at 04:06
  • 2
    Are you sure you wanted background.js to be a service worker? It seems like you wanted it to interact with popup.html. In that case, don't declare background.js as a service_worker – Nicholas Wong Apr 25 '22 at 04:28
  • then what should i declare it as?(sorry for the late response) – pizzalawl May 01 '22 at 02:35
  • @NicholasWong Not possible from what I've read; background pages are replaced by service workers in manifest v3. – Daedalus Sep 06 '22 at 02:46

0 Answers0