web-dev-qa-db-fra.com

Copier dans le Presse-papiers dans l'extension Chrome

Je fais une extension pour Google Chrome et j'ai eu un problème. 

Je dois copier le contenu d'un textarea en lecture seule dans le presse-papiers en cliquant dans la fenêtre contextuelle. Est-ce que quelqu'un sait comment s'y prendre avec du Javascript pur et sans flash? J'ai aussi jQuery chargé dans l'extension, si cela peut vous aider. Mon code actuel (non fonctionnel) est ... 

function copyHTMLCB() {
$('#lb_html').select();
$('#lb_html').focus();
textRange = document.lb_html_frm.lb_html.createTextRange();
textRange.execCommand("RemoveFormat");
textRange.execCommand("Copy");
alert("HTML has been copied to your clipboard."); }
javascriptclipboardgoogle-chrome-extension
41
Kyle Ross

Vous pouvez copier dans le presse-papiers à l’aide de Experimental Clipboard API , mais il n’est disponible que dans la branche dev du navigateur et n’est pas activé par défaut ( plus d'infos ) ..

5
serg

J'ai constaté que les solutions suivantes fonctionnent le mieux, car elles vous permettent de spécifier le type MIME des données copiées:

copy: function(str, mimeType) {
  document.oncopy = function(event) {
    event.clipboardData.setData(mimeType, str);
    event.preventDefault();
  };
  document.execCommand("copy", false, null);
}
40
gjuggler

Tout le mérite revient à joelpt, mais si quelqu'un d'autre en avait besoin pour fonctionner en javascript pur sans jQuery (ce que j'avais fait), voici une adaptation de sa solution:

function copyTextToClipboard(text) {
  //Create a textbox field where we can insert text to. 
  var copyFrom = document.createElement("textarea");

  //Set the text content to be the text you wished to copy.
  copyFrom.textContent = text;

  //Append the textbox field into the body as a child. 
  //"execCommand()" only works when there exists selected text, and the text is inside 
  //document.body (meaning the text is part of a valid rendered HTML element).
  document.body.appendChild(copyFrom);

  //Select all the text!
  copyFrom.select();

  //Execute command
  document.execCommand('copy');

  //(Optional) De-select the text using blur(). 
  copyFrom.blur();

  //Remove the textbox field from the document.body, so no other JavaScript nor 
  //other elements can get access to this.
  document.body.removeChild(copyFrom);
}
36
Jeff Gran

J'utilise cette fonction simple pour copier un texte en clair donné dans le presse-papiers (Chrome uniquement, utilise jQuery):

// Copy provided text to the clipboard.
function copyTextToClipboard(text) {
    var copyFrom = $('<textarea/>');
    copyFrom.text(text);
    $('body').append(copyFrom);
    copyFrom.select();
    document.execCommand('copy');
    copyFrom.remove();
}

// Usage example
copyTextToClipboard('This text will be copied to the clipboard.');

En raison de la séquence rapide ajout-sélection-copie-suppression, il ne semble pas nécessaire de masquer la zone de texte ou de lui attribuer des attributs/CSS spécifiques. Au moins sur ma machine, Chrome ne l'affiche même pas à l'écran avant sa suppression, même avec de très gros morceaux de texte.

Notez que cela ne fonctionnera que uniquement dans une extension/application Chrome. Si vous utilisez un fichier manifest.json v2, vous devez y déclarer l'autorisation 'clipboardWrite'; c'est obligatoire pour les applications et recommandé pour les extensions.

20
joelpt

Vous ne pouvez pas copier un texte en lecture seule à l'aide de execCommand("Copy"), il doit s'agir d'une zone de texte modifiable. La solution consiste à créer un élément de saisie de texte et à copier le texte à partir de là. Malheureusement, vous ne pouvez pas masquer cet élément avec display: none ou visibility: hidden, car cela empêchera également la commande select/copy de fonctionner. Cependant, vous pouvez le "cacher" en utilisant des marges négatives. Voici ce que j'ai fait dans une fenêtre contextuelle Chrome Extension qui obtient une URL courte. C'est le morceau du code qui réécrit la fenêtre contextuelle avec le shorturl (approche rapide et sale ;-)):

document.body.innerHTML = '<p><a href="'+shortlink+'" target="_blank" >'+shortlink+'</a><form style="margin-top: -35px; margin-left: -500px;"><input type="text" id="shortlink" value="'+shortlink+'"></form></p>'
document.getElementById("shortlink").select()
document.execCommand("Copy")
3
atomicules

J'ai lu quelque part qu'il existe des restrictions de sécurité avec Javascript qui vous empêchent d'interagir avec le système d'exploitation. J'ai eu un bon succès avec ZeroClipboard dans le passé ( http://code.google.com/p/zeroclipboard/ ), mais il utilise Flash. Le site web de Bitly l'utilise assez efficacement: http://bit.ly/

1
pinksy

J'ai eu un problème similaire où je devais copier le texte d'un élément en utilisant uniquement du javascript. Je vais ajouter la solution à ce problème ici pour toute personne intéressée. Cette solution fonctionne pour de nombreux éléments HTML, y compris textarea. 

HTML:

    <textarea id="text-to-copy">This is the text I want to copy</textarea>
    <span id="span-text-to-copy">This is the text I want to copy</span>

Javascript:

let textElement = document.getElementById("text-to-copy");

//remove selection of text before copying. We can also call this after copying
window.getSelection().removeAllRanges();

//create a Range object
let range = document.createRange();

//set the Range to contain a text node.
range.selectNode(textElement);

//Select the text node
window.getSelection().addRange(range);

try {
    //copy text
    document.execCommand('copy');
} catch(err) {
    console.log("Not able to copy ");
}

Notez que si vous souhaitez copier un élément span par exemple, vous pouvez obtenir son nœud de texte et l'utiliser comme paramètre pour range.selectNode () pour sélectionner ce texte:

let elementSpan = document.getElementById("span-text-to-copy");
let textNode = elementSpan.childNodes[0];
0
jakobinn