Use exportFunction() to share clipboard copy with JS running in docum…

…ent/page context.
facebook · Dec 29, 2019 · aea3006 · aea3006
1 parent 0eac01a
commit aea3006
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/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": [
     {

diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -91,3 +91,19 @@ if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
 injectCode(
   ';(' + installHook.toString() + '(window))' + saveNativeValues + 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'},
+  );
+}
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/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).catch(err => {});
+  }
 }
 
 export function copyWithSet(