Me gustaría llamar a una API cuando se presiona un botón en la ventana emergente de extensión. Pero la API no se llama y no puede recuperar ninguna respuesta de la API de búsqueda.

Intenté lo siguiente:

• Se agregó el punto final de la API a host_permissions en el archivo de manifiesto.
• Creó una interfaz de usuario con un botón. La interfaz de usuario se muestra cuando hago clic en el icono de la extensión.
• En popup.js, se agregó un controlador de eventos al botón. Cuando se hace clic en el botón, se envía un mensaje al archivo background.js con la URL de la API.
• En background.js, agregué un oyente para escuchar el mensaje y llamar a la API.

manifiesto.js

 { "name": "Product Extractor Extension", "description": "Extract product data from predefined websites.", "version": "1.0", "manifest_version": 3, "permissions": [ "storage", "activeTab", "scripting" ], "host_permissions": [ "https://jsonplaceholder.typicode.com/*" ], "action": { "default_popup": "popup.html", "default_title": "Kevin" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ], "background": { "service_worker": "background.js" } }

ventana emergente.html

 <button class="signInButton" id="signInButton"> Sign In </button>

emergente.js

 document.getElementById("signInButton").onclick = function() { chrome.runtime.sendMessage({ contentScriptQuery: "userLogin", url: 'https://jsonplaceholder.typicode.com/todos/1' }, function(response) { console.log(response); }); }

fondo.js

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { switch (request.contentScriptQuery) { case "userLogin": fetch("https://jsonplaceholder.typicode.com/todos/1") .then((response) => response.json()) .then((json) => sendResponse("kerk")); break; } return true; });