Copier dans le Presse-papiers dans L'Extension Chrome

J'ai trouvé que ce qui suit fonctionne le mieux, car il vous permet 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);
}

Tout le crédit va à joelpt, mais au cas où quelqu'un d'autre aurait besoin de cela pour fonctionner en javascript pur sans jQuery (je l'ai 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);
}

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 append-select-copy-remove, il ne semble pas nécessaire de masquer la zone de texte ou de lui donner des attributs CSS/particuliers. Au moins sur ma machine, Chrome ne le rend même pas à l'écran avant qu'il ne soit supprimé, même avec de très gros morceaux de texte.

Notez que cela ne fonctionnera que dans une extension/application Chrome. Si vous utilisez un manifeste v2.json vous devez déclarer l'autorisation' clipboardWrite ' là; ceci est obligatoire pour les applications et recommandé pour les extensions.

Vous ne pouvez pas copier un bit de texte en lecture seule en utilisant 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 en utilisant 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 D'Extension Chrome qui obtient une url courte. C'est le bit 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") 

J'ai lu quelque part qu'il existe des restrictions de sécurité avec Javascript qui vous empêche 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 Bitly l'utilise assez efficacement: http://bit.ly/

J'ai eu un problème similaire où je devais copier du texte d'un élément en utilisant uniquement 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 voulez 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];