Estoy creando mi primera extensión de Chrome que manipula DOM para cambiar el fondo de la página una vez que hago clic en un botón en la extensión, pero desafortunadamente, la extensión logra cambiar el fondo en lugar de la página web y necesito saber la razón de eso:

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" }

Esta extensión parece obtener el cuerpo de la extensión, no el cuerpo de la página, y dado que estoy usando chrome.scripting.executeScripts , mi extensión debería inyectar mi código en la página activa, pero esto no sucede.

¿Qué estoy haciendo mal aquí?