Estoy creando una extensión de Google Chrome y tengo algunos comandos de búsqueda de una API. ¿Cómo los envío cuando hago clic en un botón? O que hago?
¿Cuál es la mejor manera para que una extensión de Chrome raspe la barra de progreso? Digamos desde YouTube y ponerlo en la extensión, para que también funcione y pueda retroceder y avanzar rápidamente.
el objetivo final es verse así, es una ventana emergente y cuando hago clic en reproducir o en cualquier botón, envía la llamada api o los comandos de búsqueda (youtube es solo un ejemplo) 1
Debe implementar una secuencia de comandos en segundo plano con una función para realizar la llamada a la API. La razón por la que recomiendo realizar esta llamada en segundo plano es que se manejará independientemente de la vida útil de la pestaña: si el usuario cierra la pestaña, la llamada API termina con la pestaña. En su manifiesto, deberá agregar una referencia a la secuencia de comandos en segundo plano y el permiso de host para el dominio del servidor, a menos que el servidor tenga una política para habilitar CORS desde cualquier lugar.
Para hacer clic en el botón para llamar a la función api en segundo plano, use el paso de mensajes : al hacer clic en el botón, envía un mensaje desde la pestaña con el botón y, en segundo plano, el trabajador del servicio implementa un oyente para recibir estos mensajes. Cuando el agente de escucha en segundo plano recibe un mensaje de clic de botón, realiza la llamada a la API. El mensaje puede incluir datos adicionales si la llamada a la API necesita algunos argumentos.
En términos de código, necesitará lo siguiente:
trabajador_servicio.js
// implement listener to receive messages from tabs chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { if (request.api) callApi(request.my_arg) } ); function callApi(arg){ // implement this to perform API call }manifiesto.json
"host_permissions": [ "https://your-api-domain.com/*" ], "background": { "service_worker": "service-worker.js" }, "content_scripts": [ { "matches": [ "YOUR MATCH PATTERN HERE" ], "js": [ "content-script.js" ] } ]contenido-script.js
// add button onclick/onkeypress handler button.onclick = sendMessage; function sendMessage(args){ chrome.runtime.sendMessage({api: "call api", my_arg:1}); }