Default popup no working when pressing the extension icon

Question

I am trying to make a simple extension, that save whatever text is selected. For now, i just created the UI.

I have an html file called popup.html linked to a css file. That works alright when trying it with live server. Here's the manifest.json:

{
    "name": "Save Things",
    "version": "1.0",
    "manifest_version": 3,
    "author": "Mohammed Hazem Hassine",
    "action": {
        "default-popup": "popup.html",
        "default_title": "Saving extension thingy"
    },
    "background": {
      "service_worker": "script.js"
    }
}

the script.js file contains a simple console.log("extension loaded"); the extension seems to be loaded but when i click the icon the popup doesn't show. Picture of the added extension. I'm using the brave browser by the way but i think that isn't an issue.

What am i doing wrong and how can i fix it?

This is my first stack overflow question, any advice regarding that will be appreciated.