Estoy desarrollando una extensión de Chrome V3. Quiero copiar contenido al portapapeles en mi archivo JS.
El manifest.json como se muestra a continuación,
"background" :{ "service_worker" :"eventPage.js" }, "permissions" : [ "contextMenus", "clipboardWrite" ]He probado 2 soluciones para la función de copia.
Solución 1:
const el = document.createElement('textarea'); el.value = str; el.setAttribute('readonly', ''); el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el);El resultado:
Error in event handler: ReferenceError: document is not defined at copyToClipboardSolución 2:
navigator.clipboard.writeText(str);El resultado:
Error in event handler: TypeError: Cannot read properties of undefined (reading 'writeText')La extensión de Chrome se ejecuta como un trabajador de servicio. Entonces parece que no puedo acceder al documento DOM y no tengo la concesión de writeText. ¿Alguien tiene otra sugerencia?
Gracias.
Seguiré la excelente sugerencia que te dio wOxxOm, desarrollándola en un ejemplo concreto. Lo que quiere hacer es tener un ContentScript.js que se ejecute en cualquier pestaña activa con una página web, ya que no puede acceder al DOM desde backGround.js, y luego enviar un mensaje a este script, desde donde copiaría al portapapeles.
manifiesto.json
"background" :{ "service_worker" :"eventPage.js" }, "permissions" : [ "contextMenus", "clipboardWrite" ], "content_scripts": [ // this is what you need to add { "matches": [ "<all_urls>" ], "js": ["content.js"] } ],Desde background.js, enviaría un mensaje, que se manejará en ContentScript.js
fondo.js
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, { message: "copyText", textToCopy: "some text" }, function(response) {}) })En contentScript.js, captaría el mensaje y lo copiaría en el portapapeles.
contenido.js
chrome.runtime.onMessage.addListener( // this is the message listener function(request, sender, sendResponse) { if (request.message === "copyText") copyToTheClipboard(request.textToCopy); } ); async function copyToTheClipboard(textToCopy){ const el = document.createElement('textarea'); el.value = textToCopy; el.setAttribute('readonly', ''); el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); }