Estoy tratando de crear una extensión y tengo problemas para inyectar una función.
Este es el enlace en el que estoy tratando de trabajar, sospecho que el problema es la mancha al principio.
blob:https://web.whatsapp.com/29d92fb3-d8e1-4c84-89af-b51668f5d2b3Este es mi archivo manifest.json:
{ "name": "Image rotator", "version": "1.0", "manifest_version": 3, "description": "An extension to rotate images in web page.", "background": { "service_worker": "src/background.js" }, "permissions": ["contextMenus","scripting","storage", "declarativeContent", "activeTab","<all_urls>"], "host_permissions": [ "*://web.whatsapp.com/*" ] }Este es mi archivo background.js:
chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ "id": "rotateImage", "title": "Rotate Image", "contexts": ["image"] }) }); function injectedFunc() { document.getElementsByTagName("img").style.transform = "rotate(90deg)"; }; try { chrome.contextMenus.onClicked.addListener((tab) => { chrome.scripting.executeScript({ target: { tabId: tab.id }, function: injectedFunc }); }); } catch (e) { console.error(e); }En esta versión, me sale este error:
Error en el controlador de eventos: TypeError: Error en la invocación de scripting.executeScript(scripting.ScriptInjection injection, devolución de llamada de función opcional): Error en el parámetro 'injection': Error en la propiedad 'target': Falta la propiedad requerida 'tabId'.
Si cambio el método onClicked a esta versión:
try{ chrome.contextMenus.onClicked.addListener((info, tab) => { if(info.menuItemId === "rotateImage"){ chrome.scripting.executeScript({ target: {tabId: tab.id}, function: injectedFunc });} }); } catch (e) { console.error(e); }me sale este error:
Error no capturado (en promesa): no se puede acceder al contenido de la página. El manifiesto de extensión debe solicitar permiso para acceder al host respectivo.
La segunda variante era la correcta, según esto , necesitaba agregar "match_origin_as_fallback": true, al archivo manifest.json dentro de "content_script" para que el navegador pudiera leer la URL del blob.
Pero aún así no funcionó, necesitaba agregar el código inyectado a un archivo diferente al background.js.
Con algo de ayuda de Reddit (gracias, Ibrahim_AA), las API de sendMessage y onMessage hicieron el trabajo. Aquí está la solución completa:
manifiesto.json:
{ "name": "Image rotator", "version": "1.0", "manifest_version": 3, "description": "An extension to rotate images in web page.", "background": { "service_worker": "src/background.js" }, "permissions": ["contextMenus","scripting"], "host_permissions": [ "*://web.whatsapp.com/*" ], "content_scripts": [ { "matches": ["*://web.whatsapp.com/*"], "match_origin_as_fallback": true, "js": ["contentScript.js"] } ] }fondo.js:
chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ "id": "rotateImage", "title": "Rotate Image", "contexts": ["image"] }) }); try{ chrome.contextMenus.onClicked.addListener((info, tab) => { if(info.menuItemId === "rotateImage"){ chrome.tabs.query({active: true, currentWindow: true}, function (tabs) { chrome.tabs.sendMessage(tabs[0].id, { type: "rotateImage", }); }); } }); } catch (e) { console.error(e); }contentScript.js
function rotateImage() { document.getElementsByTagName("img")[0].style.transform = "rotate(90deg)"; }; chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) { if (msg.type === 'rotateImage') { rotateImage(); } });Espero que ayude a cualquiera que se encuentre con este problema.