Use clipboard API

taku0 · Oct 27, 2018 · 35b029c · 35b029c
1 parent e112a62
commit 35b029c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 43 deletions.
diff --git a/data/menuItems.js b/data/menuItems.js
@@ -383,7 +383,7 @@ const imageMenu = {
                 action: (menu) => {
                     const url = menu.target.src;
 
-                    copyText(url);
+                    requestWriteTextToClipboard(url);
                 },
             },
         ],
@@ -463,7 +463,7 @@ const linkMenu = {
                 action: (menu) => {
                     const url = extractLinkURL(menu.target);
 
-                    copyText(url);
+                    requestWriteTextToClipboard(url);
                 },
             },
         ],
@@ -993,32 +993,15 @@ function saveImageURL(url) {
 }
 
 /**
- * Copy text.
+ * Requests the add-on to copy text.
  *
  * @param {string} text A string to be copied
  */
-function copyText(text) {
-    const p = document.createElement('p');
-
-    p.textContent = text;
-
-    document.body.appendChild(p);
-
-    p.focus();
-
-    const selection = window.getSelection();
-
-    selection.removeAllRanges();
-
-    const range = document.createRange();
-
-    range.selectNode(p);
-
-    selection.addRange(range);
-
-    document.execCommand('copy');
-
-    document.body.removeChild(p);
+function requestWriteTextToClipboard(text) {
+    browser.runtime.sendMessage({
+        name: 'requestWriteTextToClipboard',
+        text,
+    });
 }
 
 /**
@@ -1042,34 +1025,22 @@ function requestReloadTab(bypassCache) {
     });
 }
 
-function paste(target) {
+async function paste(target) {
     // `document.execCommand('paste');` modifies its `textContent` rather than
     // the `value` property.  So, if the `value` of the `target` is different
     // to its `textContent` (i.e. the user edited its text), the pasted text
     // is not reflected.
     //
-    // Therefore, this function pastes the text into the new textarea, then
-    // modifies `target.value` manually.
+    // Therefore, this function modifies `target.value` manually.
+
+    const pasted = await browser.runtime.sendMessage({
+        name: 'requestReadTextFromClipboard',
+    });
 
     const selectionStart = target.selectionStart;
     const selectionEnd = target.selectionEnd;
     const selectionDirection = target.selectionDirection;
 
-    const newTextArea = document.createElement('textarea');
-
-    newTextArea.contentEditable = true;
-    newTextArea.style.width = "0px";
-    newTextArea.style.height = "0px";
-    target.parentNode.insertBefore(newTextArea, target);
-    newTextArea.focus();
-    document.execCommand('paste');
-
-    const pasted = newTextArea.value;
-
-    console.log(pasted);
-
-    target.parentNode.removeChild(newTextArea);
-
     const oldText = target.value;
     const newText = oldText.slice(0, selectionStart) +
         pasted +

diff --git a/lib/commands.js b/lib/commands.js
@@ -221,6 +221,14 @@ async function reloadTab({bypassCache}, sender) {
     browser.tabs.reload(sender.tab.id, { bypassCache });
 }
 
+function writeTextToClipboard({text}) {
+    return navigator.clipboard.writeText(text);
+}
+
+function readTextFromClipboard() {
+    return navigator.clipboard.readText();
+}
+
 const commandMap = {
     requestActivateWindowRelative: activateWindowRelative,
     requestActivateTabRelative: activateTabRelative,
@@ -239,4 +247,6 @@ const commandMap = {
     requestOpenNewWindow: openNewWindow,
     requestOpenNewTab: openNewTab,
     requestReloadTab: reloadTab,
+    requestWriteTextToClipboard: writeTextToClipboard,
+    requestReadTextFromClipboard: readTextFromClipboard,
 };