與剪貼簿互動

擴充套件程式中處理剪貼簿的操作正從 Web API 的 `document.execCommand` 方法（已棄用）過渡到 `navigator.clipboard` 方法。

注意： `navigator.clipboard` API 是規範中較新的部分，可能尚未在所有瀏覽器中完全實現。本文件介紹了一些限制，但在使用它們之前，請務必檢視每種方法的相容性表格，以確保 API 符合您的需求。

兩種 API 的區別在於，`document.execCommand` 類似於鍵盤的複製、剪下和貼上操作——在網頁和剪貼簿之間交換資料——而 `navigator.clipboard` 則向剪貼簿讀寫任意資料。

`navigator.clipboard` 分別提供了讀取或寫入的方法。

文字內容，使用 `navigator.clipboard.readText()` 和 `navigator.clipboard.writeText()`。
影像、富文字、HTML 和其他富媒體內容，使用 `navigator.clipboard.read()` 和 `navigator.clipboard.write()`。

然而，雖然 `navigator.clipboard.readText()` 和 `navigator.clipboard.writeText()` 在所有瀏覽器上都能正常工作，但 `navigator.clipboard.read()` 和 `navigator.clipboard.write()` 卻不行。例如，在撰寫本文時，Firefox 中的 `navigator.clipboard.read()` 和 `navigator.clipboard.write()` 尚未完全實現，因此要

處理影像，可以使用 `browser.clipboard.setImageData()` 將影像寫入剪貼簿，並使用 `document.execCommand("paste")` 將影像貼上到網頁上。
要將富媒體內容（例如 HTML、包含影像的富文字等）寫入剪貼簿，請使用 `document.execCommand("copy")` 或 `document.execCommand("cut")`。然後，可以使用 `navigator.clipboard.read()`（推薦）或 `document.execCommand("paste")` 從剪貼簿讀取內容。

寫入剪貼簿

本節介紹將資料寫入剪貼簿的選項。

使用剪貼簿 API

剪貼簿 API 可以將任意資料從您的擴充套件程式寫入剪貼簿。使用該 API 需要在 `manifest.json` 檔案中具有 `clipboardRead` 或 `clipboardWrite` 許可權。由於該 API 僅在安全上下文中可用，因此不能從在 `http:` 頁面上執行的內容指令碼中使用，只能在 `https:` 頁面上使用。

對於頁面指令碼，需要使用 Web API `navigator.permissions` 請求 `clipboard-write` 許可權。您可以使用 `navigator.permissions.query()` 來檢查該許可權。

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

注意： `clipboard-write` 許可權名稱在 Firefox 中不受支援，僅在 Chromium 瀏覽器中受支援。

此函式接受一個字串並將其寫入剪貼簿。

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

使用 execCommand()

`document.execCommand()` 方法的 `"cut"` 和 `"copy"` 命令用於將選中的內容替換剪貼簿的內容。在使用者操作的短暫事件處理程式中（例如，點選處理程式）使用這些命令無需特殊許可權。

例如，假設您的彈出視窗包含以下 HTML

html

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

要讓 `"copy"` 按鈕複製 `` 元素的內容，您可以使用類似這樣的程式碼：

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

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

由於 `execCommand()` 呼叫位於點選事件處理程式中，您不需要任何特殊許可權。

但是，假設您從一個警報觸發複製：

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

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

browser.alarms.onAlarm.addListener(copy);

這可能不起作用，具體取決於瀏覽器。在 Firefox 中，它將不起作用，並且您將在控制檯中看到類似如下的訊息：

document.execCommand('cut'/'copy') 被拒絕，因為它不是在短暫的使用者生成事件處理程式中呼叫的。

為了啟用此用例，您需要申請 `clipboardWrite` 許可權。因此：`"clipboardWrite"` 使您能夠在使用者操作的短暫事件處理程式之外寫入剪貼簿。

注意： `document.execCommand()` 不適用於 `type="hidden"` 的輸入欄位、帶有 HTML5 屬性 `"hidden"` 的元素，或使用 `display: none;` 的任何匹配 CSS 規則。因此，要為 `span`、`div` 或 `p` 標籤新增“複製到剪貼簿”按鈕，您需要使用一種解決方法，例如將輸入框的位置設定為絕對定位並將其移出視口。

瀏覽器特定注意事項

剪貼簿和其他涉及的 API 正在快速發展，因此瀏覽器在工作方式上存在差異。

在 Chrome 中

即使在使用者生成的事件處理程式之外寫入剪貼簿，您也不需要 `clipboardWrite`。

在 Firefox 中

`navigator.clipboard.write()` 不受支援。

有關更多資訊，請參閱瀏覽器相容性表格。

從剪貼簿讀取

本節介紹從剪貼簿讀取或貼上資料的選項。

使用剪貼簿 API

剪貼簿 API 的 `navigator.clipboard.readText()` 和 `navigator.clipboard.read()` 方法允許您在安全上下文中從剪貼簿讀取任意文字或二進位制資料。這使您無需將其貼上到可編輯元素中即可訪問剪貼簿中的資料。

一旦從 Permissions API 獲得 `clipboard-read` 許可權，您就可以輕鬆地從剪貼簿讀取。例如，這段程式碼從剪貼簿獲取文字，並用該文字替換 ID 為 `outbox` 的元素的內容。

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

使用 execCommand()

要使用 `document.execCommand("paste")`，您的擴充套件需要 `clipboardRead` 許可權。即使您在使用者生成的事件處理程式（如 click 或 keypress）中使用 `"paste"` 命令，也是如此。

考慮包含類似內容的 HTML：

html

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

要當用戶點選 `"paste"` `