Interaktion mit der Zwischenablage

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

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

Für Seitenskripte 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 Berechtigungen in kurzlebigen Ereignis-Handlern für eine Benutzeraktion (zum Beispiel einem Klick-Handler) verwendet werden.

Angenommen, Sie haben ein Popup, das das folgende HTML enthält:

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

Um die Schaltfläche "copy" den Inhalt des <input>-Elements kopieren zu lassen, können Sie diesen Code verwenden:

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

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

Da sich der execCommand()-Aufruf in einem Klick-Ereignis-Handler befindet, benötigen Sie keine speziellen Berechtigungen.

Angenommen jedoch, Sie lösen das Kopieren stattdessen aus 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 funktioniert das möglicherweise nicht. In Firefox wird es nicht funktionieren, und Sie sehen eine Meldung wie diese in Ihrer Konsole:

document.execCommand('cut'/'copy') wurde abgelehnt, da es nicht aus einem benutzergenerierten kurzlebigen Ereignis-Handler aufgerufen wurde.

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

Die Zwischenablage und andere betroffene APIs entwickeln sich schnell weiter, daher gibt es Unterschiede zwischen den Browsern, wie sie funktionieren.

In Chrome:

• Sie benötigen nicht "clipboardWrite", selbst wenn Sie außerhalb eines benutzergenerierten Ereignis-Handlers in die Zwischenablage schreiben.

In Firefox:

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

Siehe die Browser-Kompatibilitäts-Tabellen für weitere Informationen.

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 aus der Zwischenablage in sicheren Kontexten zu lesen. Dadurch können Sie auf die Daten in der Zwischenablage zugreifen, ohne sie in ein editierbares Element einzufügen.

Sobald Sie die Berechtigung "clipboard-read" von der Berechtigungs-API haben, können Sie problemlos aus der Zwischenablage lesen. Zum Beispiel wird in diesem Code-Snippet der Text aus der Zwischenablage abgerufen und der Inhalt des Elements mit der ID "outbox" durch diesen Text ersetzt.

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

Um document.execCommand("paste") zu verwenden, benötigt Ihre Erweiterung die Berechtigung "clipboardRead" anfordern. Dies gilt auch, wenn Sie den "paste"-Befehl innerhalb eines benutzergenerierten Ereignis-Handlers verwenden, wie zum Beispiel click oder keypress.

Berücksichtigen Sie HTML, das etwa Folgendes enthält:

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

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

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" Permissions ab Version 54, unterstützt jedoch 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 versetzt werden.

• Clipboard-API
• Berechtigungs-API
• Inhalt editierbar machen