Interagieren mit der Zwischenablage

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

Das Clipboard API schreibt beliebige Daten von Ihrer Erweiterung in die Zwischenablage. Die Nutzung des API erfordert die Berechtigung "clipboardRead" oder "clipboardWrite" in Ihrer manifest.json-Datei. Da das API nur in sicheren Kontexten verfügbar ist, kann es nicht von einem Inhalts-Skript auf http:-Seiten, sondern nur auf https:-Seiten verwendet werden.

Für Seitenskripte muss die Berechtigung "clipboard-write" mithilfe des Web-APIs 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 durch das ausgewählte Material zu ersetzen. Diese Befehle können ohne spezielle Berechtigung in kurzlebigen Ereignishandlern für eine Benutzeraktion (zum Beispiel ein Click-Handler) verwendet werden.

Angenommen, Sie haben ein Popup, das den folgenden HTML-Code 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 der Aufruf von execCommand() innerhalb eines Klick-Ereignishandlers erfolgt, sind keine besonderen Berechtigungen erforderlich.

Angenommen, Sie lösen das Kopieren stattdessen durch einen 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 dies möglicherweise nicht. In Firefox wird dies nicht funktionieren, und Sie sehen eine Nachricht wie diese in Ihrer Konsole:

document.execCommand('cut'/'copy') wurde abgelehnt, da es nicht aus einem kurz laufenden, benutzergenerierten Ereignishandler heraus aufgerufen wurde.

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

Die Zwischenablage- und andere hiermit verbundene APIs entwickeln sich schnell weiter, sodass es Unterschiede zwischen den Browsern gibt, wie sie funktionieren.

In Chrome:

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

In Firefox:

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

Sehen Sie sich die Browser-Kompatibilitätstabellen für weitere Informationen an.

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

Die Methoden navigator.clipboard.readText() und navigator.clipboard.read() des Clipboard API ermöglichen es Ihnen, beliebigen Text oder binäre Daten aus der Zwischenablage in sicheren Kontexten zu lesen. Dadurch können Sie auf die Daten in der Zwischenablage zugreifen, ohne sie in ein bearbeitbares Element einzufügen.

Sobald Sie die Berechtigung "clipboard-read" vom Permissions API haben, können Sie leicht von der Zwischenablage lesen. Zum Beispiel holt dieser Codeschnipsel den Text aus 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 selbst dann, wenn Sie den "paste"-Befehl innerhalb eines benutzergenerierten Ereignishandlers verwenden, wie click oder keypress.

Berücksichtigen Sie HTML, das so etwas enthält:

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

Um den Inhalt des <textarea>-Elements mit der ID "output" bei einem Klick auf den "paste"-<button>-Button aus der Zwischenablage zu setzen, können Sie einen Code wie diesen 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" ab Version 54, unterstützt jedoch das Einfügen in Elemente nur im Content Edit Mode, was für Inhalts-Skripte nur mit einem <textarea> funktioniert. Für Hintergrund-Skripte kann jedes Element in den Content Edit Mode gesetzt werden.

• Clipboard API
• Permissions API
• Inhalt bearbeitbar machen