MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Interagir avec le presse-papier

Les WebExtensions peuvent intéragir avec le système de presse-papier à l'aide de document.execCommand():

  • document.execCommand("copy")
  • document.execCommand("cut")
  • document.execCommand("paste")

Ecrire dans le presse-papiers

Vous pouvez utiliser les commandes "couper" et "copier" sans permission spéciale si vous les utilisez dans un gestionnaire d'événements de courte durée pour une action utilisateur (par exemple, un gestionnaire de clics).

Par exemple, supposons que vous ayez un popup qui inclut le HTML suivant :

<input id="input" type="text"/>
<button id="copy">Copy</button>

Pour que le bouton "Copier" copie le contenu de "Entrée", vous pouvez utiliser le code suivant :

function copy() {
  var copyText = document.querySelector("#input");
  copyText.select();
  document.execCommand("Copy");
}

document.querySelector("#copy").addEventListener("click", copy);

Parce que l'appel execCommand() est dans un gestionnaire d'événement de clic, vous n'avez pas besoin d'autorisations spéciales.

Cependant, disons à la place, vous déclenchez la copie à partir d'une alarme :

function copy() {
  var copyText = document.querySelector("#input");
  copyText.select();
  document.execCommand("Copy");
}

browser.alarms.create({
  delayInMinutes: 0.1
});

browser.alarms.onAlarm.addListener(copy);

Selon le navigateur, cela peut ne pas fonctionner. Sur Firefox, cela ne fonctionnera pas, et vous verrez le message suivant dans votre console:

"document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler."

Pour activer ce cas d'utilisation, vous devez demander la permission "clipboardWrite". Donc : "clipboardWrite" vous permet d'écrire dans le presse-papiers en dehors d'un gestionnaire d'événements de courte durée pour une action de l'utilisateur.

Considérations spécifiques au navigateur

Dans Chrome:

  • Vous pouvez écrire dans le presse-papiers comme ceci dans tous les contextes d'exécution - pages d'arrière-plan, scripts de contenu, pages d'options et pop-ups.
  • Vous n'avez pas vraiment besoin de "clipboardWrite", même pour écrire dans le presse-papiers en dehors d'un gestionnaire d'événements généré par l'utilisateur.

Dans Firefox:

  • Vous pouvez écrire dans le presse-papiers comme ceci dans tous les contextes d'exécution sauf pour les pages d'arrière-plan. Dans Firefox, vous ne pouvez pas sélectionner un texte ou concentrer un champ de saisie dans les pages d'arrière-plan, de sorte que vous ne pouvez pas écrire dans le presse-papiers depuis une page d'arrière-plan.
  • La permission "clipboardWrite" est seulement supporté qu'à partir de la version 51

Lecture du presse-papier

Pour utiliser la commande "coller", vous devez avoir la permission "clipboardRead". Par exemple, supposons que votre HTML comporte quelque chose comme ceci :

<textarea id="output"></textarea>
<button id="paste">Paste</button>

Pour définir le contenu de "sortie" dans le presse-papiers lorsque l'utilisateur clique sur "coller", vous pouvez utiliser le code suivant :

function paste() {
  var pasteText = document.querySelector("#output");
  pasteText.focus();
  document.execCommand("Paste");
  console.log(pasteText.textContent);
}

document.querySelector("#paste").addEventListener("click", paste);

Cela nécessitera "clipboardRead", même s'il s'agit d'un gestionnaire d'événements généré par l'utilisateur.

Considérations spécifiques au navigateur

Firefox prend en charge la permission "clipboardRead" à partir de la version 54, mais nécessite un élément dans le mode editable du contenu, qui pour les scripts de contenu ne fonctionne qu'avec un <textarea>. Pour les scripts en arrière-plan, tout élément peut être configuré en mode éditable.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : hellosct1
 Dernière mise à jour par : hellosct1,