Arbeiten mit der Zwischenablage

Dieser Abschnitt beschreibt die Optionen zum Schreiben von Daten in die Zwischenablage.

Die Clipboard API schreibt beliebige Daten aus Ihrer Erweiterung in die Zwischenablage. Die Verwendung der API erfordert die Berechtigung "clipboardRead" oder "clipboardWrite" in Ihrer manifest.json-Datei. Da die API nur in Sicheren Kontexten verfügbar ist, kann sie nicht von einem Inhaltsskript genutzt werden, das auf http:-Seiten läuft, sondern nur auf https:-Seiten.

Für Skripte auf Webseiten muss die Berechtigung "clipboard-write" über die Web-API navigator.permissions angefordert werden. Sie können diese Berechtigung mit navigator.permissions.query() überprüfen:

navigator.permissions.query({ name: "clipboard-write" }).then((result) => {
  if (result.state === "granted" || result.state === "prompt") {
    /* write to the clipboard now */
  }
});

Diese Funktion nimmt einen String und schreibt ihn in die Zwischenablage:

function updateClipboard(newClip) {
  navigator.clipboard.writeText(newClip).then(
    () => {
      /* clipboard successfully set */
    },
    () => {
      /* clipboard write failed */
    },
  );
}

Die Befehle "cut" und "copy" der Methode document.execCommand() werden verwendet, um den Inhalt der Zwischenablage mit dem ausgewählten Material zu ersetzen. Diese Befehle können ohne spezielle Berechtigung in kurzlebigen Ereignishandlern für eine Benutzeraktion verwendet werden (zum Beispiel ein Klick-Handler).

Zum Beispiel, wenn Sie ein Popup haben, das das folgende HTML enthält:

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

Um den "copy"-Button den Inhalt des <input>-Elements kopieren zu lassen, können Sie einen Code wie diesen verwenden:

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

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

Da sich der execCommand()-Aufruf innerhalb eines Klick-Ereignishandlers befindet, benötigen Sie keine speziellen Berechtigungen.

Angenommen, Sie lösen stattdessen das Kopieren von einem Alarm aus:

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

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

browser.alarms.onAlarm.addListener(copy);

Je nach Browser könnte dies nicht funktionieren. In Firefox wird es nicht funktionieren, und Sie sehen eine Nachricht wie diese in Ihrer Konsole:

document.execCommand('cut'/'copy') wurde abgelehnt, weil es nicht von innerhalb eines kurz laufenden, benutzergenerierten Ereignishandlers aufgerufen wurde.

Um diesen Anwendungsfall zu ermöglichen, müssen Sie die Berechtigung "clipboardWrite" anfordern. Also: "clipboardWrite" ermöglicht es Ihnen, außerhalb eines kurzlebigen Ereignishandlers für eine Benutzeraktion in die Zwischenablage zu schreiben.

Die Zwischenablage und andere hier beteiligte APIs entwickeln sich schnell, daher gibt es Unterschiede zwischen Browsern, wie sie funktionieren.

In Chrome:

• Sie benötigen kein "clipboardWrite", selbst um außerhalb eines benutzergenerierten Ereignishandlers auf die Zwischenablage zu schreiben.

In Firefox:

• navigator.clipboard.write() wird nicht unterstützt.

Weitere Informationen finden Sie in den Browser-Kompatibilitätstabellen.

Dieser Abschnitt beschreibt die Optionen zum Lesen oder Einfügen von Daten aus der Zwischenablage.

Die Methoden navigator.clipboard.readText() und navigator.clipboard.read() der Clipboard-API ermöglichen es Ihnen, beliebigen Text oder Binärdaten von der Zwischenablage in sicheren Kontexten zu lesen. Dadurch können Sie auf die Daten in der Zwischenablage zugreifen, ohne sie in ein bearbeitbares Element einfügen zu müssen.

Sobald Sie die Berechtigung "clipboard-read" von der Permissions API erhalten haben, können Sie leicht von der Zwischenablage lesen. Zum Beispiel holt dieses Code-Snippet den Text von der Zwischenablage und ersetzt den Inhalt des Elements mit der ID "outbox" durch diesen Text.

navigator.clipboard
  .readText()
  .then((clipText) => (document.getElementById("outbox").innerText = clipText));

Um document.execCommand("paste") zu verwenden, benötigt Ihre Erweiterung die Berechtigung "clipboardRead". Dies gilt auch, wenn Sie den Befehl "paste" in einem benutzergenerierten Ereignishandler verwenden, wie click oder keypress.

Betrachten Sie HTML, das etwas wie dies enthält:

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

Um den Inhalt des <textarea>-Elements mit der ID "output" von der Zwischenablage zu setzen, wenn der Benutzer auf den "paste" <button> klickt, können Sie einen Code verwenden wie diesen:

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

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

Firefox unterstützt die Berechtigung "clipboardRead" ab Version 54, erlaubt aber nur das Einfügen in Elemente im Content Editable Mode, was für Inhaltsskripte nur mit einem <textarea> funktioniert. Für Hintergrundskripte kann jedes Element in den Content Editable Mode gesetzt werden.

• Clipboard API
• Permissions API
• Inhalt bearbeitbar machen