Saltar al contenido

¿Por qué document.execCommand(“pegar”) no funciona en Google Chrome?

Luego de mirar en varios repositorios y foros de internet finalmente nos encontramos con la resolución que te enseñaremos aquí.

Solución:

Solía ​​haber una API de portapapeles experimental en Chrome, pero se eliminó en Chrome 13.

Chrome se ha movido hacia lo más estándar. document.execCommand('paste'), document.execCommand('copy') y document.execCommand('cut') comandos: https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla#Executing%5FCommands

En Chrome, necesitará que se agreguen permisos a su manifiesto: “clipboardRead” y “clipboardWrite”. http://developer.chrome.com/extensions/declare_permissions.html

Hasta Chrome 38, estos permisos del portapapeles solo estaban disponibles para las páginas de extensión, como las secuencias de comandos en segundo plano. A partir de Chrome 39, las secuencias de comandos de contenido también pueden usar estas API del portapapeles después de declarar los permisos del portapapeles en el archivo de manifiesto (crbug.com/395376).

Vocación document.execCommand("paste") no es compatible con los navegadores “razonables”, debido a problemas de seguridad, ya que podría permitir que el script lea datos confidenciales (como contraseñas) del portapapeles.

Este es el matriz de compatibilidad de document.execCommand("...") en relación con los eventos del portapapeles:

“dupdo” “pegar” “cortar”
ES DECIR DE ACUERDO DE ACUERDO n / A
Borde DE ACUERDO n / A DE ACUERDO
Firefox DE ACUERDO n / A DE ACUERDO
Cromo DE ACUERDO n / A DE ACUERDO

Mis dos centavos para esto:

  • el comportamiento de Borde, Firefox y Cromo es “razonable” ya que impiden pegar/leer datos del portapapeles. Sí permiten cortar, ya que cortar es simplemente una copia seguida de una eliminación.
  • el comportamiento de ES DECIR no tiene sentido para mí, ya que habilita el pegado “arriesgado”, pero no ejecuta el evento de corte.

Puede detección de características los posibles comandos utilizando el método document.queryCommandSupported.

Editar: Según MDN document.queryCommandSupported ahora está en desuso y ya no debe usarse.

Esto funciona bien para mí en una página de fondo.

function getClipboard() 
    var pasteTarget = document.createElement("div");
    pasteTarget.contentEditable = true;
    var actElem = document.activeElement.appendChild(pasteTarget).parentNode;
    pasteTarget.focus();
    document.execCommand("Paste", null, null);
    var paste = pasteTarget.innerText;
    actElem.removeChild(pasteTarget);
    return paste;
;

Por supuesto, su extensión aún necesita el permiso “clipboardRead” y debe usar el paso de mensajes para devolver esta información a su secuencia de comandos de contenido:

contenido.js:

chrome.extension.sendMessage(
    cmd: "clipboard", //$NON-NLS-0$
    action: "paste" //$NON-NLS-0$
, function(response) 
    if (response.paste) 
        var range = document.getSelection().getRangeAt(0);
        range.deleteContents();
        range.insertNode(document.createTextNode(response.paste));
    
);

fondo.js:

function getClipboard() 
    var pasteTarget = document.createElement("div");
    pasteTarget.contentEditable = true;
    var actElem = document.activeElement.appendChild(pasteTarget).parentNode;
    pasteTarget.focus();
    document.execCommand("Paste", null, null);
    var paste = pasteTarget.innerText;
    actElem.removeChild(pasteTarget);
    return paste;
;

function onClipboardMessage(request, sender, sendResponse) 
    if (request.action === "paste")  //$NON-NLS-0$
        sendResponse(
            paste: getClipboard()
        );
    


chrome.extension.onMessage.addListener(onClipboardMessage);

Si para ti ha sido de utilidad este artículo, agradeceríamos que lo compartas con más programadores así nos ayudas a difundir este contenido.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *