Bug-1773681 Showing Paste button for navigator.clipboard.readText()

files/en-us/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.md

@@ -8,43 +8,22 @@ browser-compat:
 sidebar: addonsidebar
 ---
 
-Working with the clipboard in extensions is transitioning from the Web API {{domxref("Document.execCommand()","document.execCommand")}} method (which is deprecated) to the {{domxref("Clipboard", "navigator.clipboard")}} method.
+You work with the clipboard in extensions using the Web API {{domxref("Clipboard", "navigator.clipboard")}} method and `"clipboardRead"` or `"clipboardWrite"` extension permissions. {{domxref("Clipboard", "navigator.clipboard")}} enables your extension to read and write arbitrary data from and to the clipboard.
 
 > [!NOTE]
-> The {{domxref("Clipboard", "navigator.clipboard")}} API is a recent addition to the specification and may not be fully implemented in all browsers. This article describes some limitations, but be sure to review the compatibility tables for each method before using them to ensure that the API supports your needs.
+> The Web API {{domxref("Document.execCommand()","document.execCommand")}} method was used to provide clipboard functionality. However, {{domxref("Document.execCommand()","document.execCommand("copy")")}}, {{domxref("Document.execCommand()","document.execCommand("cut")")}}, and {{domxref("Document.execCommand()","document.execCommand("paste")")}} are deprecated and no longer guarantee to work or be available on any browser.
 
-The difference between the two APIs is that {{domxref("Document.execCommand()","document.execCommand")}} this is analogous to the keyboard copy, cut, and paste actions – exchanging data between a webpage and clipboard – whereas {{domxref("Clipboard", "navigator.clipboard")}} writes and reads arbitrary data to and from the clipboard.
+The {{domxref("Clipboard", "navigator.clipboard")}} API provides methods for:
 
-{{domxref("Clipboard", "navigator.clipboard")}} provide separate methods to read or write:
+- Text content, using {{domxref("Clipboard.readText", "navigator.clipboard.readText()")}} and {{domxref("Clipboard.writeText", "navigator.clipboard.writeText()")}}.
+- Images, rich text, HTML, and other rich content, using {{domxref("Clipboard.read", "navigator.clipboard.read()")}} and {{domxref("Clipboard.write", "navigator.clipboard.write()")}}.
 
-- text content, using {{domxref("Clipboard.readText", "navigator.clipboard.readText()")}} and {{domxref("Clipboard.writeText", "navigator.clipboard.writeText()")}}.
-- images, rich text, HTML, and other rich content, using {{domxref("Clipboard.read", "navigator.clipboard.read()")}} and {{domxref("Clipboard.write", "navigator.clipboard.write()")}}.
-
-However, while {{domxref("Clipboard.readText", "navigator.clipboard.readText()")}} and {{domxref("Clipboard.writeText", "navigator.clipboard.writeText()")}} work on all browsers, {{domxref("Clipboard.read", "navigator.clipboard.read()")}} and {{domxref("Clipboard.write", "navigator.clipboard.write()")}} do not. For example, on Firefox at the time of writing, {{domxref("Clipboard.read", "navigator.clipboard.read()")}} and {{domxref("Clipboard.write", "navigator.clipboard.write()")}} are not fully implemented, such that to:
-
-- work with images use {{WebExtAPIRef("clipboard.setImageData","browser.clipboard.setImageData()")}} to write images to the clipboard and {{domxref("Document.execCommand()","document.execCommand("paste")")}} to paste images to a webpage.
-- write rich content (such as, HTML, rich text including images, etc.) to the clipboard, use {{domxref("Document.execCommand()","document.execCommand("copy")")}} or {{domxref("Document.execCommand()","document.execCommand("cut")")}}. Then, either {{domxref("Clipboard.read","navigator.clipboard.read()")}} (recommended) or {{domxref("Document.execCommand()","document.execCommand("paste")")}} to read the content from the clipboard.
+> [!NOTE]
+> The Clipboard API write and read methods are only available in [secure contexts](/en-US/docs/Web/Security/Secure_Contexts). Your extension cannot use them from a content script running on `http:` pages; they can only use them from `https:` pages.
 
 ## Writing to the clipboard
 
-This section describes the options for writing data to the clipboard.
-
-### Using the Clipboard API
-
-The Clipboard API writes arbitrary data to the clipboard from your extension. Using the API requires the permission `"clipboardRead"` or `"clipboardWrite"` in your `manifest.json` file. As the API is only available to [Secure Contexts](/en-US/docs/Web/Security/Defenses/Secure_Contexts), it cannot be used from a content script running on `http:`-pages, only `https:`-pages.
-
-For page scripts, the `"clipboard-write"` permission needs to be requested using the Web API {{domxref("Permissions", "navigator.permissions")}}. You can check for that permission using {{domxref("Permissions.query", "navigator.permissions.query()")}}:
-
-```js
-navigator.permissions.query({ name: "clipboard-write" }).then((result) => {
-  if (result.state === "granted" || result.state === "prompt") {
-    /* write to the clipboard now */
-  }
-});
-```
-
-> [!NOTE]
-> The `clipboard-write` permission name is not supported in Firefox, only Chromium browsers.
+The Clipboard API write methods {{domxref("Clipboard.readText", "navigator.clipboard.readText()")}} and {{domxref("Clipboard.writeText", "navigator.clipboard.writeText()")}} write arbitrary content to the clipboard. The methods are available from a secure context after the extension's user has performed {{Glossary("Transient Activation","transient activation")}}. However, with the [`"clipboardWrite"` permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#clipboardwrite) the methods are available without transient activation.
 
 This function takes a string and writes it to the clipboard:
 
@@ -61,111 +40,40 @@ function updateClipboard(newClip) {
 }
 ```
 
-### Using execCommand()
-
-The `"cut"` and `"copy"` commands of the {{domxref("Document.execCommand", "document.execCommand()")}} method are used to replace the clipboard's content with the selected material. These commands can be used without any special permission in short-lived event handlers for a user action (for example, a click handler).
-
-For example, suppose you've got a popup that includes the following HTML:
-
-```html
-<input id="input" type="text" /> <button id="copy">Copy</button>
-```
-
-To make the `"copy"` button copy the contents of the {{HTMLElement("input")}} element, you can use code like this:
-
-```js
-function copy() {
-  let copyText = document.querySelector("#input");
-  copyText.select();
-  document.execCommand("copy");
-}
-
-document.querySelector("#copy").addEventListener("click", copy);
-```
-
-Because the `execCommand()` call is inside a click event handler, you don't need any special permissions.
-
-However, let's say that instead you trigger the copy from an alarm:
-
-```js
-function copy() {
-  let copyText = document.querySelector("#input");
-  copyText.select();
-  document.execCommand("copy");
-}
-
-browser.alarms.create({
-  delayInMinutes: 0.1,
-});
-
-browser.alarms.onAlarm.addListener(copy);
-```
-
-Depending on the browser, this may not work. On Firefox, it will not work, and you'll see a message like this in your console:
-
-`document.execCommand('cut'/'copy') was denied because it was not called from inside a short running user-generated event handler.`
-
-To enable this use case, you need to ask for the `"clipboardWrite"` [permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions). So: `"clipboardWrite"` enables you to write to the clipboard outside a short-lived event handler for a user action.
-
-> [!NOTE]
-> {{domxref("Document.execCommand", "document.execCommand()")}} does not work on input fields of `type="hidden"`, with the HTML5 attribute `"hidden"`, or any matching CSS rule using `"display: none;"`. So, to add a "copy to clipboard" button to a `span`, `div`, or `p` tag, you need to use a workaround, such as setting the input's position to absolute and moving it out of the viewport.
-
-### Browser-specific considerations
-
-The clipboard and other APIs involved here are evolving rapidly, so there are variations among browsers in how they work.
-
-In Chrome:
-
-- You don't need `"clipboardWrite"`, even to write to the clipboard outside a user-generated event handler.
-
-In Firefox:
-
-- {{domxref("Clipboard.write", "navigator.clipboard.write()")}} is not supported.
-
-See the [browser compatibility tables](#browser_compatibility) for more information.
-
 ## Reading from the clipboard
 
-This section describes the options for reading or pasting data from the clipboard.
-
-### Using the Clipboard API
+The {{domxref("Clipboard.readText", "navigator.clipboard.readText()")}} and {{domxref("Clipboard.read", "navigator.clipboard.read()")}} methods let extensions read arbitrary text or binary data from the clipboard. These methods let extensions access the data in the clipboard without pasting it into an editable element.
 
-The Clipboard API's {{domxref("Clipboard.readText", "navigator.clipboard.readText()")}} and {{domxref("Clipboard.read", "navigator.clipboard.read()")}} methods let you read arbitrary text or binary data from the clipboard in [secure contexts](/en-US/docs/Web/Security/Defenses/Secure_Contexts). This lets you access the data in the clipboard without pasting it into an editable element.
+The methods are available from a secure context after the extension's user has performed {{Glossary("Transient Activation","transient activation")}} and clicked a paste prompt in an ephemeral context menu. However, with the [`"clipboardRead"` permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#clipboardRead)` permission, your extension can read from the clipboard without user confirmation or transient activation.
 
-Once you have the `"clipboard-read"` permission from the [Permissions API](/en-US/docs/Web/API/Permissions_API), you can read from the clipboard easily. For example, this snippet of code fetches the text from the clipboard and replaces the contents of the element with the ID `"outbox"` with that text.
+This snippet of code fetches the text from the clipboard and replaces the contents of the element with the ID `"outbox"` with that text.
 
 ```js
 navigator.clipboard
   .readText()
   .then((clipText) => (document.getElementById("outbox").innerText = clipText));
 ```
 
-### Using execCommand()
-
-To use {{domxref("Document.execCommand()","document.execCommand(&#34;paste&#34;)")}} your extension needs the `"clipboardRead"` [permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions). This is the case even if you're using the `"paste"` command from within a user-generated event handler, such as {{domxref("Element/click_event", "click")}} or {{domxref("Element/keypress_event", "keypress")}}.
-
-Consider HTML that includes something like this:
+### Browser-specific considerations
 
-```html
-<textarea id="output"></textarea> <button id="paste">Paste</button>
-```
+In Chrome:
 
-To set the content of the {{HTMLElement("textarea")}} element with the ID `"output"` from the clipboard when the user clicks the `"paste"` {{HTMLElement("button")}}, you can use code like this:
+- For page scripts, the `"clipboard-write"` permission needs to be requested using the Web API {{domxref("Permissions", "navigator.permissions")}}. You can check for that permission using {{domxref("Permissions.query", "navigator.permissions.query()")}}:
 
-```js
-function paste() {
-  let pasteText = document.querySelector("#output");
-  pasteText.focus();
-  document.execCommand("paste");
-  console.log(pasteText.textContent);
-}
+  ```js
+  navigator.permissions.query({ name: "clipboard-write" }).then((result) => {
+    if (result.state === "granted" || result.state === "prompt") {
+      /* write to the clipboard now */
+    }
+  });
+  ```
 
-document.querySelector("#paste").addEventListener("click", paste);
-```
+  > [!NOTE]
+  > The `clipboard-write` permission name is not supported in Firefox or Safari.
 
-### Browser-specific considerations
+In Firefox:
 
-Firefox supports the `"clipboardRead"` [permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) from version 54 but only supports pasting into elements in [content editable mode](/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable), which for content scripts only works with a {{HTMLElement("textarea")}}. For background scripts, any element can be set to content editable mode.
+- The availability of the Clipboard API read methods on the user's response to a paste prompt became available in Firefox 127. Prior to that, the methods were only available when the `"clipboardRead"` permission was set.
 
 ## Browser compatibility
 

files/en-us/mozilla/add-ons/webextensions/manifest.json/permissions/index.md

@@ -180,12 +180,12 @@ Usually, the tab that's granted `activeTab` is the active tab, with one exceptio
 
 ## Clipboard access
 
-There are two permissions which enables the extension to interact with the clipboard:
+Two permissions enable an extension to interact with the clipboard:
 
 - `clipboardWrite`
-  - : Write to the clipboard using {{DOMxRef("Clipboard.write()")}}, {{DOMxRef("Clipboard.writeText()")}}, `document.execCommand("copy")` or `document.execCommand("cut")`
+  - : Write to the clipboard using {{DOMxRef("Clipboard.write()")}} or {{DOMxRef("Clipboard.writeText()")}}.
 - `clipboardRead`
-  - : Read from the clipboard using {{DOMxRef("Clipboard.read()")}}, {{DOMxRef("Clipboard.readText()")}} or `document.execCommand("paste")`
+  - : Read from the clipboard using {{DOMxRef("Clipboard.read()")}} or {{DOMxRef("Clipboard.readText()")}}.
 
 See [Interact with the clipboard](/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard) for more details.
 

files/en-us/mozilla/firefox/releases/147/index.md

@@ -72,6 +72,8 @@ Firefox 147 is the current [Nightly version of Firefox](https://www.firefox.com/
 
 ## Changes for add-on developers
 
+- When using [navigator.clipboard.readText()](/en-US/docs/Web/API/Clipboard/readText) or [navigator.clipboard.read()](/en-US/docs/Web/API/Clipboard/read) without the `clipboardRead` permission, a clipboard paste button is displayed to obtain user confirmation. If the extension has `clipboardRead` permission, it reads the clipboard data without user confirmation. For more information on working with the clipboard in extensions, see [Interact with the clipboard](/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard). ([Firefox bug 1773681](https://bugzil.la/1773681))
+
 <!-- ### Removals -->
 
 <!-- ### Other -->

files/en-us/web/api/clipboard_api/index.md

@@ -80,12 +80,10 @@ Firefox & Safari:
 - The paste-prompt is suppressed if reading same-origin clipboard content, but not cross-origin content.
 - The `clipboard-read` and `clipboard-write` permissions are not supported (and not planned to be supported) by Firefox or Safari.
 
-Firefox [Web Extensions](/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard):
+Firefox [web extensions](/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard):
 
-- Reading text is only available for extensions with the Web Extension [`clipboardRead`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#clipboardread) permission.
-  With this permission the extension does not require transient activation or a paste prompt.
-- Writing text is available in secure context and with transient activation.
-  With the Web Extension [`clipboardWrite`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#clipboardwrite) permission transient activation is not required.
+- Reading is available to extensions with the web extension [`clipboardRead`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#clipboardread) permission. With this permission, the extension doesn't require transient activation or use the paste prompt. From Firefox 147, reading is also available without the permission in a secure context, with transient activation, and after the user clicks the paste prompt in an ephemeral context menu.
+- Writing is available in a secure context and with transient activation. However, with the web extension [`clipboardWrite`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#clipboardwrite) permission transient activation is not required.
 
 ## Examples