I am creating my first chrome extension that manipulate DOM to change page background once i click a button in the extension, but unfortunately, the extension manage to change itself background instead of the web page and i need to know the reason for that:

manifest.json

{
  "name": "Demo",
  "description": "certain description!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "storage",
    "declarativeContent",
    "activeTab",
    "scripting"
  ],
  "action": {
    "default_popup": "popup.html"
   }
}

popup.js

 const button = document.getElementById('change-bg');

 button.addEventListener('click, () => {
   let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
   chrome.scripting.executeScript({
     target: { tabId: tab.id },
     function: changeBackground()
  })
 })
}
function changeBackground() {
   document.body.style.background = "blue"
}

This extension seems to get the body of the extension not the body of the page, and since i am using chrome.scripting.executeScripts, my extension should inject my code into the active page but this doesn't happen.

What am i doing wrong here?