Use exportFunction() to share clipboard copy with JS running in document/page context.

Author: Brian Vaughn

packages/react-devtools-extensions/firefox/manifest.json

@@ -44,7 +44,7 @@
     "scripts": ["build/background.js"]
   },
 
-  "permissions": ["file:///*", "http://*/*", "https://*/*"],
+  "permissions": ["file:///*", "http://*/*", "https://*/*", "clipboardWrite"],
 
   "content_scripts": [
     {

packages/react-devtools-extensions/src/injectGlobalHook.js

@@ -97,3 +97,19 @@ if (document.contentType === 'text/html') {
       detectReact,
   );
 }
+
+if (typeof exportFunction === 'function') {
+  // eslint-disable-next-line no-undef
+  exportFunction(
+    text => {
+      // Call clipboard.writeText from the extension content script
+      // (as it has the clipboardWrite permission) and return a Promise
+      // accessible to the webpage js code.
+      return new window.Promise((resolve, reject) =>
+        window.navigator.clipboard.writeText(text).then(resolve, reject),
+      );
+    },
+    window.wrappedJSObject.__REACT_DEVTOOLS_GLOBAL_HOOK__,
+    {defineAs: 'clipboardCopyText'},
+  );
+}

packages/react-devtools-shared/src/backend/utils.js

@@ -40,7 +40,19 @@ export function cleanForBridge(
 
 export function copyToClipboard(value: any): void {
   const safeToCopy = serializeToString(value);
-  copy(safeToCopy === undefined ? 'undefined' : safeToCopy);
+  const text = safeToCopy === undefined ? 'undefined' : safeToCopy;
+  const {clipboardCopyText} = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+  // On Firefox navigator.clipboard.writeText has to be called from
+  // the content script js code (because it requires the clipboardWrite
+  // permission to be allowed out of a "user handling" callback),
+  // clipboardCopyText is an helper injected into the page from.
+  // injectGlobalHook.
+  if (typeof clipboardCopyText === 'function') {
+    clipboardCopyText(text).catch(err => {});
+  } else {
+    copy(text);
+  }
 }
 
 export function copyWithSet(