feat: use optional permission for clipboard access

dessant · Oct 21, 2023 · f805a49 · f805a49
1 parent 6bb518c
commit f805a49
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 23 deletions.
diff --git a/src/action/App.vue b/src/action/App.vue
@@ -289,7 +289,9 @@ import {
   canShare,
   sendLargeMessage,
   handleBrowserActionEscapeKey,
-  getAppTheme
+  getAppTheme,
+  hasClipboardReadPermission,
+  requestClipboardReadPermission
 } from 'utils/app';
 import {getText, getActiveTab, isValidTab} from 'utils/common';
 import {enableContributions} from 'utils/config';
@@ -512,9 +514,15 @@ export default {
     onPasteButtonClick: function () {
       if (!this.startProcessing()) return;
 
-      this.processClipboardImages({showError: true}).finally(() => {
-        this.stopProcessing();
-      });
+      requestClipboardReadPermission()
+        .then(granted =>
+          granted
+            ? this.processClipboardImages({showError: true})
+            : showNotification({messageId: 'error_noClipboardReadAccess'})
+        )
+        .finally(() => {
+          this.stopProcessing();
+        });
     },
 
     onEngineClick: function (engine) {
@@ -866,7 +874,8 @@ export default {
         options.autoPasteAction &&
         !this.$env.isSafari &&
         !this.$env.isSamsung &&
-        !(this.$env.isMobile && this.$env.isFirefox);
+        !(this.$env.isMobile && this.$env.isFirefox) &&
+        (await hasClipboardReadPermission());
 
       this.setupPinnedButtons({maxPins: this.maxPinnedToolbarButtons});
 
@@ -1006,8 +1015,11 @@ body {
   max-height: 100px;
   padding-top: 8px;
   padding-bottom: 24px;
-  transition: max-height 0.3s ease, padding-top 0.3s ease,
-    padding-bottom 0.3s ease, opacity 0.2s ease;
+  transition:
+    max-height 0.3s ease,
+    padding-top 0.3s ease,
+    padding-bottom 0.3s ease,
+    opacity 0.2s ease;
 }
 
 .settings-enter-from,
@@ -1073,8 +1085,10 @@ body {
     object-fit: scale-down;
 
     border-radius: 8px;
-    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.06),
-      0px 6px 10px 0px rgba(0, 0, 0, 0.04), 0px 1px 12px 0px rgba(0, 0, 0, 0.03);
+    box-shadow:
+      0px 3px 5px -1px rgba(0, 0, 0, 0.06),
+      0px 6px 10px 0px rgba(0, 0, 0, 0.04),
+      0px 1px 12px 0px rgba(0, 0, 0, 0.03);
   }
 
   & .preview-close-button {

diff --git a/src/assets/locales/en/messages.json b/src/assets/locales/en/messages.json
@@ -1349,6 +1349,16 @@
     "description": "Error message."
   },
 
+  "error_noClipboardReadAccess": {
+    "message": "Cannot get data from the clipboard.",
+    "description": "Error message."
+  },
+
+  "error_noClipboardWriteAccess": {
+    "message": "Cannot add data to the clipboard.",
+    "description": "Error message."
+  },
+
   "error_pageParseError": {
     "message": "Something went wrong. The web page could not be parsed.",
     "description": "Error message."

diff --git a/src/assets/manifest/chrome.json b/src/assets/manifest/chrome.json
@@ -11,7 +11,6 @@
 
   "permissions": [
     "alarms",
-    "clipboardRead",
     "contextMenus",
     "storage",
     "unlimitedStorage",
@@ -23,6 +22,8 @@
     "<all_urls>"
   ],
 
+  "optional_permissions": ["clipboardRead"],
+
   "content_security_policy": "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src * data: blob:; connect-src * blob:; object-src 'none';",
 
   "icons": {

diff --git a/src/assets/manifest/edge.json b/src/assets/manifest/edge.json
@@ -11,7 +11,6 @@
 
   "permissions": [
     "alarms",
-    "clipboardRead",
     "contextMenus",
     "storage",
     "unlimitedStorage",
@@ -23,6 +22,8 @@
     "<all_urls>"
   ],
 
+  "optional_permissions": ["clipboardRead"],
+
   "content_security_policy": "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src * data: blob:; connect-src * blob:; object-src 'none';",
 
   "icons": {

diff --git a/src/assets/manifest/firefox.json b/src/assets/manifest/firefox.json
@@ -19,7 +19,6 @@
 
   "permissions": [
     "alarms",
-    "clipboardRead",
     "contextMenus",
     "storage",
     "unlimitedStorage",
@@ -31,6 +30,8 @@
     "<all_urls>"
   ],
 
+  "optional_permissions": ["clipboardRead"],
+
   "content_security_policy": "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src * data: blob:; connect-src * blob:; object-src 'none';",
 
   "icons": {

diff --git a/src/assets/manifest/opera.json b/src/assets/manifest/opera.json
@@ -11,7 +11,6 @@
 
   "permissions": [
     "alarms",
-    "clipboardRead",
     "contextMenus",
     "storage",
     "unlimitedStorage",
@@ -23,6 +22,8 @@
     "<all_urls>"
   ],
 
+  "optional_permissions": ["clipboardRead"],
+
   "content_security_policy": "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src * data: blob:; connect-src * blob:; object-src 'none';",
 
   "icons": {

diff --git a/src/browse/App.vue b/src/browse/App.vue
@@ -183,7 +183,8 @@ import {
   getEngineIcon,
   validateShareId,
   sendLargeMessage,
-  getAppTheme
+  getAppTheme,
+  requestClipboardReadPermission
 } from 'utils/app';
 import {getText} from 'utils/common';
 import {optionKeys} from 'utils/data';
@@ -409,9 +410,15 @@ export default {
     onPasteButtonClick: function () {
       if (!this.startProcessing()) return;
 
-      this.processClipboardImages().finally(() => {
-        this.stopProcessing();
-      });
+      requestClipboardReadPermission()
+        .then(granted =>
+          granted
+            ? this.processClipboardImages()
+            : showNotification({messageId: 'error_noClipboardReadAccess'})
+        )
+        .finally(() => {
+          this.stopProcessing();
+        });
     },
 
     onFileEvent: function (ev, source) {
@@ -694,7 +701,8 @@ export default {
       }
 
       border-radius: 8px;
-      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.06),
+      box-shadow:
+        0px 3px 5px -1px rgba(0, 0, 0, 0.06),
         0px 6px 10px 0px rgba(0, 0, 0, 0.04),
         0px 1px 12px 0px rgba(0, 0, 0, 0.03);
     }
@@ -748,8 +756,10 @@ export default {
     max-height: 96px;
 
     border-radius: 8px;
-    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.12),
-      0px 6px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 12px 0px rgba(0, 0, 0, 0.06);
+    box-shadow:
+      0px 3px 5px -1px rgba(0, 0, 0, 0.12),
+      0px 6px 10px 0px rgba(0, 0, 0, 0.08),
+      0px 1px 12px 0px rgba(0, 0, 0, 0.06);
   }
 
   & .list-items {

diff --git a/src/options/App.vue b/src/options/App.vue
@@ -208,7 +208,12 @@ import {includes, without} from 'lodash-es';
 import draggable from 'vuedraggable';
 
 import storage from 'storage/storage';
-import {getListItems, canShare, showContributePage} from 'utils/app';
+import {
+  getListItems,
+  canShare,
+  showContributePage,
+  hasClipboardReadPermission
+} from 'utils/app';
 import {getText} from 'utils/common';
 import {enableContributions} from 'utils/config';
 import {optionKeys} from 'utils/data';
@@ -347,7 +352,8 @@ export default {
       this.autoPasteEnabled =
         !this.$env.isSafari &&
         !this.$env.isSamsung &&
-        !(this.$env.isMobile && this.$env.isFirefox);
+        !(this.$env.isMobile && this.$env.isFirefox) &&
+        (await hasClipboardReadPermission());
 
       this.dataLoaded = true;
     },

diff --git a/src/utils/app.js b/src/utils/app.js
@@ -1854,6 +1854,19 @@ function addThemeListener(callback) {
   addAppThemeListener(callback);
 }
 
+async function hasClipboardReadPermission() {
+  return browser.permissions.contains({permissions: ['clipboardRead']});
+}
+
+async function requestClipboardReadPermission() {
+  // Safari: requesting clipboard access is handled by the browser
+  if (targetEnv === 'safari') {
+    return true;
+  }
+
+  return browser.permissions.request({permissions: ['clipboardRead']});
+}
+
 export {
   getEnabledEngines,
   getSupportedEngines,
@@ -1935,5 +1948,7 @@ export {
   processAppUse,
   addSystemThemeListener,
   addAppThemeListener,
-  addThemeListener
+  addThemeListener,
+  hasClipboardReadPermission,
+  requestClipboardReadPermission
 };