Add "Find in Page" feature (#446)

* Add "Find in Page" feature

* Add custom theme to overlay

* Fix lint

5 files changed, 338 insertions, 250 deletions

diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index e6ff47430..be0cd008b 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -6499,809 +6499,822 @@
         }
       },
       {
-        "defaultMessage": "!!!Speech",
+        "defaultMessage": "!!!Find in Page",
         "end": {
           "column": 3,
           "line": 57
         },
         "file": "src/lib/Menu.js",
+        "id": "menu.edit.findInPage",
+        "start": {
+          "column": 14,
+          "line": 54
+        }
+      },
+      {
+        "defaultMessage": "!!!Speech",
+        "end": {
+          "column": 3,
+          "line": 61
+        },
+        "file": "src/lib/Menu.js",
         "id": "menu.edit.speech",
         "start": {
           "column": 10,
-          "line": 54
+          "line": 58
         }
       },
       {
         "defaultMessage": "!!!Start Speaking",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 65
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.startSpeaking",
         "start": {
           "column": 17,
-          "line": 58
+          "line": 62
         }
       },
       {
         "defaultMessage": "!!!Stop Speaking",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 69
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.stopSpeaking",
         "start": {
           "column": 16,
-          "line": 62
+          "line": 66
         }
       },
       {
         "defaultMessage": "!!!Start Dictation",
         "end": {
           "column": 3,
-          "line": 69
+          "line": 73
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.startDictation",
         "start": {
           "column": 18,
-          "line": 66
+          "line": 70
         }
       },
       {
         "defaultMessage": "!!!Emoji & Symbols",
         "end": {
           "column": 3,
-          "line": 73
+          "line": 77
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.emojiSymbols",
         "start": {
           "column": 16,
-          "line": 70
+          "line": 74
         }
       },
       {
         "defaultMessage": "!!!Open Quick Switch",
         "end": {
           "column": 3,
-          "line": 77
+          "line": 81
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.openQuickSwitch",
         "start": {
           "column": 19,
-          "line": 74
+          "line": 78
         }
       },
       {
         "defaultMessage": "!!!Back",
         "end": {
           "column": 3,
-          "line": 81
+          "line": 85
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.back",
         "start": {
           "column": 8,
-          "line": 78
+          "line": 82
         }
       },
       {
         "defaultMessage": "!!!Forward",
         "end": {
           "column": 3,
-          "line": 85
+          "line": 89
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.forward",
         "start": {
           "column": 11,
-          "line": 82
+          "line": 86
         }
       },
       {
         "defaultMessage": "!!!Actual Size",
         "end": {
           "column": 3,
-          "line": 89
+          "line": 93
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.resetZoom",
         "start": {
           "column": 13,
-          "line": 86
+          "line": 90
         }
       },
       {
         "defaultMessage": "!!!Zoom In",
         "end": {
           "column": 3,
-          "line": 93
+          "line": 97
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.zoomIn",
         "start": {
           "column": 10,
-          "line": 90
+          "line": 94
         }
       },
       {
         "defaultMessage": "!!!Zoom Out",
         "end": {
           "column": 3,
-          "line": 97
+          "line": 101
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.zoomOut",
         "start": {
           "column": 11,
-          "line": 94
+          "line": 98
         }
       },
       {
         "defaultMessage": "!!!Enter Full Screen",
         "end": {
           "column": 3,
-          "line": 101
+          "line": 105
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.enterFullScreen",
         "start": {
           "column": 19,
-          "line": 98
+          "line": 102
         }
       },
       {
         "defaultMessage": "!!!Exit Full Screen",
         "end": {
           "column": 3,
-          "line": 105
+          "line": 109
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.exitFullScreen",
         "start": {
           "column": 18,
-          "line": 102
+          "line": 106
         }
       },
       {
         "defaultMessage": "!!!Toggle Full Screen",
         "end": {
           "column": 3,
-          "line": 109
+          "line": 113
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.toggleFullScreen",
         "start": {
           "column": 20,
-          "line": 106
+          "line": 110
         }
       },
       {
         "defaultMessage": "!!!Toggle Developer Tools",
         "end": {
           "column": 3,
-          "line": 113
+          "line": 117
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.toggleDevTools",
         "start": {
           "column": 18,
-          "line": 110
+          "line": 114
         }
       },
       {
         "defaultMessage": "!!!Toggle Todos Developer Tools",
         "end": {
           "column": 3,
-          "line": 117
+          "line": 121
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.toggleTodosDevTools",
         "start": {
           "column": 23,
-          "line": 114
+          "line": 118
         }
       },
       {
         "defaultMessage": "!!!Toggle Service Developer Tools",
         "end": {
           "column": 3,
-          "line": 121
+          "line": 125
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.toggleServiceDevTools",
         "start": {
           "column": 25,
-          "line": 118
+          "line": 122
         }
       },
       {
         "defaultMessage": "!!!Reload Service",
         "end": {
           "column": 3,
-          "line": 125
+          "line": 129
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.reloadService",
         "start": {
           "column": 17,
-          "line": 122
+          "line": 126
         }
       },
       {
         "defaultMessage": "!!!Reload Ferdi",
         "end": {
           "column": 3,
-          "line": 129
+          "line": 133
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.reloadFranz",
         "start": {
           "column": 15,
-          "line": 126
+          "line": 130
         }
       },
       {
         "defaultMessage": "!!!Lock Ferdi",
         "end": {
           "column": 3,
-          "line": 133
+          "line": 137
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.lockFerdi",
         "start": {
           "column": 13,
-          "line": 130
+          "line": 134
         }
       },
       {
         "defaultMessage": "!!!Minimize",
         "end": {
           "column": 3,
-          "line": 137
+          "line": 141
         },
         "file": "src/lib/Menu.js",
         "id": "menu.window.minimize",
         "start": {
           "column": 12,
-          "line": 134
+          "line": 138
         }
       },
       {
         "defaultMessage": "!!!Close",
         "end": {
           "column": 3,
-          "line": 141
+          "line": 145
         },
         "file": "src/lib/Menu.js",
         "id": "menu.window.close",
         "start": {
           "column": 9,
-          "line": 138
+          "line": 142
         }
       },
       {
         "defaultMessage": "!!!Learn More",
         "end": {
           "column": 3,
-          "line": 145
+          "line": 149
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.learnMore",
         "start": {
           "column": 13,
-          "line": 142
+          "line": 146
         }
       },
       {
         "defaultMessage": "!!!Changelog",
         "end": {
           "column": 3,
-          "line": 149
+          "line": 153
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.changelog",
         "start": {
           "column": 13,
-          "line": 146
+          "line": 150
         }
       },
       {
         "defaultMessage": "!!!Support",
         "end": {
           "column": 3,
-          "line": 153
+          "line": 157
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.support",
         "start": {
           "column": 11,
-          "line": 150
+          "line": 154
         }
       },
       {
         "defaultMessage": "!!!Copy Debug Information",
         "end": {
           "column": 3,
-          "line": 157
+          "line": 161
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.debugInfo",
         "start": {
           "column": 13,
-          "line": 154
+          "line": 158
         }
       },
       {
         "defaultMessage": "!!!Publish Debug Information",
         "end": {
           "column": 3,
-          "line": 161
+          "line": 165
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.publishDebugInfo",
         "start": {
           "column": 20,
-          "line": 158
+          "line": 162
         }
       },
       {
         "defaultMessage": "!!!Ferdi Debug Information",
         "end": {
           "column": 3,
-          "line": 165
+          "line": 169
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.debugInfoCopiedHeadline",
         "start": {
           "column": 27,
-          "line": 162
+          "line": 166
         }
       },
       {
         "defaultMessage": "!!!Your Debug Information has been copied to your clipboard.",
         "end": {
           "column": 3,
-          "line": 169
+          "line": 173
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.debugInfoCopiedBody",
         "start": {
           "column": 23,
-          "line": 166
+          "line": 170
         }
       },
       {
         "defaultMessage": "!!!Unlock with Touch ID",
         "end": {
           "column": 3,
-          "line": 173
+          "line": 177
         },
         "file": "src/lib/Menu.js",
         "id": "locked.touchId",
         "start": {
           "column": 11,
-          "line": 170
+          "line": 174
         }
       },
       {
         "defaultMessage": "!!!unlock via Touch ID",
         "end": {
           "column": 3,
-          "line": 177
+          "line": 181
         },
         "file": "src/lib/Menu.js",
         "id": "locked.touchIdPrompt",
         "start": {
           "column": 17,
-          "line": 174
+          "line": 178
         }
       },
       {
         "defaultMessage": "!!!Terms of Service",
         "end": {
           "column": 3,
-          "line": 181
+          "line": 185
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.tos",
         "start": {
           "column": 7,
-          "line": 178
+          "line": 182
         }
       },
       {
         "defaultMessage": "!!!Privacy Statement",
         "end": {
           "column": 3,
-          "line": 185
+          "line": 189
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.privacy",
         "start": {
           "column": 11,
-          "line": 182
+          "line": 186
         }
       },
       {
         "defaultMessage": "!!!File",
         "end": {
           "column": 3,
-          "line": 189
+          "line": 193
         },
         "file": "src/lib/Menu.js",
         "id": "menu.file",
         "start": {
           "column": 8,
-          "line": 186
+          "line": 190
         }
       },
       {
         "defaultMessage": "!!!View",
         "end": {
           "column": 3,
-          "line": 193
+          "line": 197
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view",
         "start": {
           "column": 8,
-          "line": 190
+          "line": 194
         }
       },
       {
         "defaultMessage": "!!!Services",
         "end": {
           "column": 3,
-          "line": 197
+          "line": 201
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services",
         "start": {
           "column": 12,
-          "line": 194
+          "line": 198
         }
       },
       {
         "defaultMessage": "!!!Window",
         "end": {
           "column": 3,
-          "line": 201
+          "line": 205
         },
         "file": "src/lib/Menu.js",
         "id": "menu.window",
         "start": {
           "column": 10,
-          "line": 198
+          "line": 202
         }
       },
       {
         "defaultMessage": "!!!Help",
         "end": {
           "column": 3,
-          "line": 205
+          "line": 209
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help",
         "start": {
           "column": 8,
-          "line": 202
+          "line": 206
         }
       },
       {
         "defaultMessage": "!!!About Ferdi",
         "end": {
           "column": 3,
-          "line": 209
+          "line": 213
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.about",
         "start": {
           "column": 9,
-          "line": 206
+          "line": 210
         }
       },
       {
         "defaultMessage": "!!!What's new?",
         "end": {
           "column": 3,
-          "line": 213
+          "line": 217
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.announcement",
         "start": {
           "column": 16,
-          "line": 210
+          "line": 214
         }
       },
       {
         "defaultMessage": "!!!Settings",
         "end": {
           "column": 3,
-          "line": 217
+          "line": 221
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.settings",
         "start": {
           "column": 12,
-          "line": 214
+          "line": 218
         }
       },
       {
         "defaultMessage": "!!!Check for updates",
         "end": {
           "column": 3,
-          "line": 221
+          "line": 225
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.checkForUpdates",
         "start": {
           "column": 19,
-          "line": 218
+          "line": 222
         }
       },
       {
         "defaultMessage": "!!!Hide",
         "end": {
           "column": 3,
-          "line": 225
+          "line": 229
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.hide",
         "start": {
           "column": 8,
-          "line": 222
+          "line": 226
         }
       },
       {
         "defaultMessage": "!!!Hide Others",
         "end": {
           "column": 3,
-          "line": 229
+          "line": 233
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.hideOthers",
         "start": {
           "column": 14,
-          "line": 226
+          "line": 230
         }
       },
       {
         "defaultMessage": "!!!Unhide",
         "end": {
           "column": 3,
-          "line": 233
+          "line": 237
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.unhide",
         "start": {
           "column": 10,
-          "line": 230
+          "line": 234
         }
       },
       {
         "defaultMessage": "!!!Auto-hide menu bar",
         "end": {
           "column": 3,
-          "line": 237
+          "line": 241
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.autohideMenuBar",
         "start": {
           "column": 19,
-          "line": 234
+          "line": 238
         }
       },
       {
         "defaultMessage": "!!!Quit",
         "end": {
           "column": 3,
-          "line": 241
+          "line": 245
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.quit",
         "start": {
           "column": 8,
-          "line": 238
+          "line": 242
         }
       },
       {
         "defaultMessage": "!!!Add New Service...",
         "end": {
           "column": 3,
-          "line": 245
+          "line": 249
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.addNewService",
         "start": {
           "column": 17,
-          "line": 242
+          "line": 246
         }
       },
       {
         "defaultMessage": "!!!Add New Workspace...",
         "end": {
           "column": 3,
-          "line": 249
+          "line": 253
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces.addNewWorkspace",
         "start": {
           "column": 19,
-          "line": 246
+          "line": 250
         }
       },
       {
         "defaultMessage": "!!!Open workspace drawer",
         "end": {
           "column": 3,
-          "line": 253
+          "line": 257
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces.openWorkspaceDrawer",
         "start": {
           "column": 23,
-          "line": 250
+          "line": 254
         }
       },
       {
         "defaultMessage": "!!!Close workspace drawer",
         "end": {
           "column": 3,
-          "line": 257
+          "line": 261
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces.closeWorkspaceDrawer",
         "start": {
           "column": 24,
-          "line": 254
+          "line": 258
         }
       },
       {
         "defaultMessage": "!!!Activate next service...",
         "end": {
           "column": 3,
-          "line": 261
+          "line": 265
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.setNextServiceActive",
         "start": {
           "column": 23,
-          "line": 258
+          "line": 262
         }
       },
       {
         "defaultMessage": "!!!Activate previous service...",
         "end": {
           "column": 3,
-          "line": 265
+          "line": 269
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.activatePreviousService",
         "start": {
           "column": 27,
-          "line": 262
+          "line": 266
         }
       },
       {
         "defaultMessage": "!!!Disable notifications & audio",
         "end": {
           "column": 3,
-          "line": 269
+          "line": 273
         },
         "file": "src/lib/Menu.js",
         "id": "sidebar.muteApp",
         "start": {
           "column": 11,
-          "line": 266
+          "line": 270
         }
       },
       {
         "defaultMessage": "!!!Enable notifications & audio",
         "end": {
           "column": 3,
-          "line": 273
+          "line": 277
         },
         "file": "src/lib/Menu.js",
         "id": "sidebar.unmuteApp",
         "start": {
           "column": 13,
-          "line": 270
+          "line": 274
         }
       },
       {
         "defaultMessage": "!!!Workspaces",
         "end": {
           "column": 3,
-          "line": 277
+          "line": 281
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces",
         "start": {
           "column": 14,
-          "line": 274
+          "line": 278
         }
       },
       {
         "defaultMessage": "!!!Default",
         "end": {
           "column": 3,
-          "line": 281
+          "line": 285
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces.defaultWorkspace",
         "start": {
           "column": 20,
-          "line": 278
+          "line": 282
         }
       },
       {
         "defaultMessage": "!!!Todos",
         "end": {
           "column": 3,
-          "line": 285
+          "line": 289
         },
         "file": "src/lib/Menu.js",
         "id": "menu.todos",
         "start": {
           "column": 9,
-          "line": 282
+          "line": 286
         }
       },
       {
         "defaultMessage": "!!!Open Todos drawer",
         "end": {
           "column": 3,
-          "line": 289
+          "line": 293
         },
         "file": "src/lib/Menu.js",
         "id": "menu.Todoss.openTodosDrawer",
         "start": {
           "column": 19,
-          "line": 286
+          "line": 290
         }
       },
       {
         "defaultMessage": "!!!Close Todos drawer",
         "end": {
           "column": 3,
-          "line": 293
+          "line": 297
         },
         "file": "src/lib/Menu.js",
         "id": "menu.Todoss.closeTodosDrawer",
         "start": {
           "column": 20,
-          "line": 290
+          "line": 294
         }
       },
       {
         "defaultMessage": "!!!Enable Todos",
         "end": {
           "column": 3,
-          "line": 297
+          "line": 301
         },
         "file": "src/lib/Menu.js",
         "id": "menu.todos.enableTodos",
         "start": {
           "column": 15,
-          "line": 294
+          "line": 298
         }
       },
       {
         "defaultMessage": "!!!Home",
         "end": {
           "column": 3,
-          "line": 301
+          "line": 305
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.goHome",
         "start": {
           "column": 17,
-          "line": 298
+          "line": 302
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 6265ee1c2..4c14c8f90 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -116,6 +116,7 @@
   "menu.edit.cut": "Cut",
   "menu.edit.delete": "Delete",
   "menu.edit.emojiSymbols": "Emoji & Symbols",
+  "menu.edit.findInPage": "Find in Page",
   "menu.edit.paste": "Paste",
   "menu.edit.pasteAndMatchStyle": "Paste And Match Style",
   "menu.edit.redo": "Redo",
diff --git a/src/i18n/messages/src/lib/Menu.json b/src/i18n/messages/src/lib/Menu.json
index 58618a427..15f5ff75f 100644
--- a/src/i18n/messages/src/lib/Menu.json
+++ b/src/i18n/messages/src/lib/Menu.json
@@ -117,15 +117,28 @@
     }
   },
   {
+    "id": "menu.edit.findInPage",
+    "defaultMessage": "!!!Find in Page",
+    "file": "src/lib/Menu.js",
+    "start": {
+      "line": 54,
+      "column": 14
+    },
+    "end": {
+      "line": 57,
+      "column": 3
+    }
+  },
+  {
     "id": "menu.edit.speech",
     "defaultMessage": "!!!Speech",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 54,
+      "line": 58,
       "column": 10
     },
     "end": {
-      "line": 57,
+      "line": 61,
       "column": 3
     }
   },
@@ -134,11 +147,11 @@
     "defaultMessage": "!!!Start Speaking",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 58,
+      "line": 62,
       "column": 17
     },
     "end": {
-      "line": 61,
+      "line": 65,
       "column": 3
     }
   },
@@ -147,11 +160,11 @@
     "defaultMessage": "!!!Stop Speaking",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 62,
+      "line": 66,
       "column": 16
     },
     "end": {
-      "line": 65,
+      "line": 69,
       "column": 3
     }
   },
@@ -160,11 +173,11 @@
     "defaultMessage": "!!!Start Dictation",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 66,
+      "line": 70,
       "column": 18
     },
     "end": {
-      "line": 69,
+      "line": 73,
       "column": 3
     }
   },
@@ -173,11 +186,11 @@
     "defaultMessage": "!!!Emoji & Symbols",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 70,
+      "line": 74,
       "column": 16
     },
     "end": {
-      "line": 73,
+      "line": 77,
       "column": 3
     }
   },
@@ -186,11 +199,11 @@
     "defaultMessage": "!!!Open Quick Switch",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 74,
+      "line": 78,
       "column": 19
     },
     "end": {
-      "line": 77,
+      "line": 81,
       "column": 3
     }
   },
@@ -199,11 +212,11 @@
     "defaultMessage": "!!!Back",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 78,
+      "line": 82,
       "column": 8
     },
     "end": {
-      "line": 81,
+      "line": 85,
       "column": 3
     }
   },
@@ -212,11 +225,11 @@
     "defaultMessage": "!!!Forward",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 82,
+      "line": 86,
       "column": 11
     },
     "end": {
-      "line": 85,
+      "line": 89,
       "column": 3
     }
   },
@@ -225,11 +238,11 @@
     "defaultMessage": "!!!Actual Size",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 86,
+      "line": 90,
       "column": 13
     },
     "end": {
-      "line": 89,
+      "line": 93,
       "column": 3
     }
   },
@@ -238,11 +251,11 @@
     "defaultMessage": "!!!Zoom In",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 90,
+      "line": 94,
       "column": 10
     },
     "end": {
-      "line": 93,
+      "line": 97,
       "column": 3
     }
   },
@@ -251,11 +264,11 @@
     "defaultMessage": "!!!Zoom Out",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 94,
+      "line": 98,
       "column": 11
     },
     "end": {
-      "line": 97,
+      "line": 101,
       "column": 3
     }
   },
@@ -264,11 +277,11 @@
     "defaultMessage": "!!!Enter Full Screen",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 98,
+      "line": 102,
       "column": 19
     },
     "end": {
-      "line": 101,
+      "line": 105,
       "column": 3
     }
   },
@@ -277,11 +290,11 @@
     "defaultMessage": "!!!Exit Full Screen",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 102,
+      "line": 106,
       "column": 18
     },
     "end": {
-      "line": 105,
+      "line": 109,
       "column": 3
     }
   },
@@ -290,11 +303,11 @@
     "defaultMessage": "!!!Toggle Full Screen",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 106,
+      "line": 110,
       "column": 20
     },
     "end": {
-      "line": 109,
+      "line": 113,
       "column": 3
     }
   },
@@ -303,11 +316,11 @@
     "defaultMessage": "!!!Toggle Developer Tools",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 110,
+      "line": 114,
       "column": 18
     },
     "end": {
-      "line": 113,
+      "line": 117,
       "column": 3
     }
   },
@@ -316,11 +329,11 @@
     "defaultMessage": "!!!Toggle Todos Developer Tools",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 114,
+      "line": 118,
       "column": 23
     },
     "end": {
-      "line": 117,
+      "line": 121,
       "column": 3
     }
   },
@@ -329,11 +342,11 @@
     "defaultMessage": "!!!Toggle Service Developer Tools",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 118,
+      "line": 122,
       "column": 25
     },
     "end": {
-      "line": 121,
+      "line": 125,
       "column": 3
     }
   },
@@ -342,11 +355,11 @@
     "defaultMessage": "!!!Reload Service",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 122,
+      "line": 126,
       "column": 17
     },
     "end": {
-      "line": 125,
+      "line": 129,
       "column": 3
     }
   },
@@ -355,11 +368,11 @@
     "defaultMessage": "!!!Reload Ferdi",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 126,
+      "line": 130,
       "column": 15
     },
     "end": {
-      "line": 129,
+      "line": 133,
       "column": 3
     }
   },
@@ -368,11 +381,11 @@
     "defaultMessage": "!!!Lock Ferdi",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 130,
+      "line": 134,
       "column": 13
     },
     "end": {
-      "line": 133,
+      "line": 137,
       "column": 3
     }
   },
@@ -381,11 +394,11 @@
     "defaultMessage": "!!!Minimize",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 134,
+      "line": 138,
       "column": 12
     },
     "end": {
-      "line": 137,
+      "line": 141,
       "column": 3
     }
   },
@@ -394,11 +407,11 @@
     "defaultMessage": "!!!Close",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 138,
+      "line": 142,
       "column": 9
     },
     "end": {
-      "line": 141,
+      "line": 145,
       "column": 3
     }
   },
@@ -407,11 +420,11 @@
     "defaultMessage": "!!!Learn More",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 142,
+      "line": 146,
       "column": 13
     },
     "end": {
-      "line": 145,
+      "line": 149,
       "column": 3
     }
   },
@@ -420,11 +433,11 @@
     "defaultMessage": "!!!Changelog",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 146,
+      "line": 150,
       "column": 13
     },
     "end": {
-      "line": 149,
+      "line": 153,
       "column": 3
     }
   },
@@ -433,11 +446,11 @@
     "defaultMessage": "!!!Support",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 150,
+      "line": 154,
       "column": 11
     },
     "end": {
-      "line": 153,
+      "line": 157,
       "column": 3
     }
   },
@@ -446,11 +459,11 @@
     "defaultMessage": "!!!Copy Debug Information",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 154,
+      "line": 158,
       "column": 13
     },
     "end": {
-      "line": 157,
+      "line": 161,
       "column": 3
     }
   },
@@ -459,11 +472,11 @@
     "defaultMessage": "!!!Publish Debug Information",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 158,
+      "line": 162,
       "column": 20
     },
     "end": {
-      "line": 161,
+      "line": 165,
       "column": 3
     }
   },
@@ -472,11 +485,11 @@
     "defaultMessage": "!!!Ferdi Debug Information",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 162,
+      "line": 166,
       "column": 27
     },
     "end": {
-      "line": 165,
+      "line": 169,
       "column": 3
     }
   },
@@ -485,11 +498,11 @@
     "defaultMessage": "!!!Your Debug Information has been copied to your clipboard.",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 166,
+      "line": 170,
       "column": 23
     },
     "end": {
-      "line": 169,
+      "line": 173,
       "column": 3
     }
   },
@@ -498,11 +511,11 @@
     "defaultMessage": "!!!Unlock with Touch ID",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 170,
+      "line": 174,
       "column": 11
     },
     "end": {
-      "line": 173,
+      "line": 177,
       "column": 3
     }
   },
@@ -511,11 +524,11 @@
     "defaultMessage": "!!!unlock via Touch ID",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 174,
+      "line": 178,
       "column": 17
     },
     "end": {
-      "line": 177,
+      "line": 181,
       "column": 3
     }
   },
@@ -524,11 +537,11 @@
     "defaultMessage": "!!!Terms of Service",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 178,
+      "line": 182,
       "column": 7
     },
     "end": {
-      "line": 181,
+      "line": 185,
       "column": 3
     }
   },
@@ -537,11 +550,11 @@
     "defaultMessage": "!!!Privacy Statement",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 182,
+      "line": 186,
       "column": 11
     },
     "end": {
-      "line": 185,
+      "line": 189,
       "column": 3
     }
   },
@@ -550,11 +563,11 @@
     "defaultMessage": "!!!File",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 186,
+      "line": 190,
       "column": 8
     },
     "end": {
-      "line": 189,
+      "line": 193,
       "column": 3
     }
   },
@@ -563,11 +576,11 @@
     "defaultMessage": "!!!View",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 190,
+      "line": 194,
       "column": 8
     },
     "end": {
-      "line": 193,
+      "line": 197,
       "column": 3
     }
   },
@@ -576,11 +589,11 @@
     "defaultMessage": "!!!Services",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 194,
+      "line": 198,
       "column": 12
     },
     "end": {
-      "line": 197,
+      "line": 201,
       "column": 3
     }
   },
@@ -589,11 +602,11 @@
     "defaultMessage": "!!!Window",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 198,
+      "line": 202,
       "column": 10
     },
     "end": {
-      "line": 201,
+      "line": 205,
       "column": 3
     }
   },
@@ -602,11 +615,11 @@
     "defaultMessage": "!!!Help",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 202,
+      "line": 206,
       "column": 8
     },
     "end": {
-      "line": 205,
+      "line": 209,
       "column": 3
     }
   },
@@ -615,11 +628,11 @@
     "defaultMessage": "!!!About Ferdi",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 206,
+      "line": 210,
       "column": 9
     },
     "end": {
-      "line": 209,
+      "line": 213,
       "column": 3
     }
   },
@@ -628,11 +641,11 @@
     "defaultMessage": "!!!What's new?",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 210,
+      "line": 214,
       "column": 16
     },
     "end": {
-      "line": 213,
+      "line": 217,
       "column": 3
     }
   },
@@ -641,11 +654,11 @@
     "defaultMessage": "!!!Settings",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 214,
+      "line": 218,
       "column": 12
     },
     "end": {
-      "line": 217,
+      "line": 221,
       "column": 3
     }
   },
@@ -654,11 +667,11 @@
     "defaultMessage": "!!!Check for updates",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 218,
+      "line": 222,
       "column": 19
     },
     "end": {
-      "line": 221,
+      "line": 225,
       "column": 3
     }
   },
@@ -667,11 +680,11 @@
     "defaultMessage": "!!!Hide",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 222,
+      "line": 226,
       "column": 8
     },
     "end": {
-      "line": 225,
+      "line": 229,
       "column": 3
     }
   },
@@ -680,11 +693,11 @@
     "defaultMessage": "!!!Hide Others",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 226,
+      "line": 230,
       "column": 14
     },
     "end": {
-      "line": 229,
+      "line": 233,
       "column": 3
     }
   },
@@ -693,11 +706,11 @@
     "defaultMessage": "!!!Unhide",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 230,
+      "line": 234,
       "column": 10
     },
     "end": {
-      "line": 233,
+      "line": 237,
       "column": 3
     }
   },
@@ -706,11 +719,11 @@
     "defaultMessage": "!!!Auto-hide menu bar",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 234,
+      "line": 238,
       "column": 19
     },
     "end": {
-      "line": 237,
+      "line": 241,
       "column": 3
     }
   },
@@ -719,11 +732,11 @@
     "defaultMessage": "!!!Quit",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 238,
+      "line": 242,
       "column": 8
     },
     "end": {
-      "line": 241,
+      "line": 245,
       "column": 3
     }
   },
@@ -732,11 +745,11 @@
     "defaultMessage": "!!!Add New Service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 242,
+      "line": 246,
       "column": 17
     },
     "end": {
-      "line": 245,
+      "line": 249,
       "column": 3
     }
   },
@@ -745,11 +758,11 @@
     "defaultMessage": "!!!Add New Workspace...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 246,
+      "line": 250,
       "column": 19
     },
     "end": {
-      "line": 249,
+      "line": 253,
       "column": 3
     }
   },
@@ -758,11 +771,11 @@
     "defaultMessage": "!!!Open workspace drawer",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 250,
+      "line": 254,
       "column": 23
     },
     "end": {
-      "line": 253,
+      "line": 257,
       "column": 3
     }
   },
@@ -771,11 +784,11 @@
     "defaultMessage": "!!!Close workspace drawer",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 254,
+      "line": 258,
       "column": 24
     },
     "end": {
-      "line": 257,
+      "line": 261,
       "column": 3
     }
   },
@@ -784,11 +797,11 @@
     "defaultMessage": "!!!Activate next service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 258,
+      "line": 262,
       "column": 23
     },
     "end": {
-      "line": 261,
+      "line": 265,
       "column": 3
     }
   },
@@ -797,11 +810,11 @@
     "defaultMessage": "!!!Activate previous service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 262,
+      "line": 266,
       "column": 27
     },
     "end": {
-      "line": 265,
+      "line": 269,
       "column": 3
     }
   },
@@ -810,11 +823,11 @@
     "defaultMessage": "!!!Disable notifications & audio",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 266,
+      "line": 270,
       "column": 11
     },
     "end": {
-      "line": 269,
+      "line": 273,
       "column": 3
     }
   },
@@ -823,11 +836,11 @@
     "defaultMessage": "!!!Enable notifications & audio",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 270,
+      "line": 274,
       "column": 13
     },
     "end": {
-      "line": 273,
+      "line": 277,
       "column": 3
     }
   },
@@ -836,11 +849,11 @@
     "defaultMessage": "!!!Workspaces",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 274,
+      "line": 278,
       "column": 14
     },
     "end": {
-      "line": 277,
+      "line": 281,
       "column": 3
     }
   },
@@ -849,11 +862,11 @@
     "defaultMessage": "!!!Default",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 278,
+      "line": 282,
       "column": 20
     },
     "end": {
-      "line": 281,
+      "line": 285,
       "column": 3
     }
   },
@@ -862,11 +875,11 @@
     "defaultMessage": "!!!Todos",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 282,
+      "line": 286,
       "column": 9
     },
     "end": {
-      "line": 285,
+      "line": 289,
       "column": 3
     }
   },
@@ -875,11 +888,11 @@
     "defaultMessage": "!!!Open Todos drawer",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 286,
+      "line": 290,
       "column": 19
     },
     "end": {
-      "line": 289,
+      "line": 293,
       "column": 3
     }
   },
@@ -888,11 +901,11 @@
     "defaultMessage": "!!!Close Todos drawer",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 290,
+      "line": 294,
       "column": 20
     },
     "end": {
-      "line": 293,
+      "line": 297,
       "column": 3
     }
   },
@@ -901,11 +914,11 @@
     "defaultMessage": "!!!Enable Todos",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 294,
+      "line": 298,
       "column": 15
     },
     "end": {
-      "line": 297,
+      "line": 301,
       "column": 3
     }
   },
@@ -914,11 +927,11 @@
     "defaultMessage": "!!!Home",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 298,
+      "line": 302,
       "column": 17
     },
     "end": {
-      "line": 301,
+      "line": 305,
       "column": 3
     }
   }
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index 957621f94..4547e84f9 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -51,6 +51,10 @@ const menuItems = defineMessages({
     id: 'menu.edit.selectAll',
     defaultMessage: '!!!Select All',
   },
+  findInPage: {
+    id: 'menu.edit.findInPage',
+    defaultMessage: '!!!Find in Page',
+  },
   speech: {
     id: 'menu.edit.speech',
     defaultMessage: '!!!Speech',
@@ -376,6 +380,27 @@ const _templateFactory = (intl, locked) => [
         type: 'separator',
       },
       {
+        label: intl.formatMessage(menuItems.findInPage),
+        accelerator: 'CmdOrCtrl+F',
+        click() {
+          // Check if there is a service active
+          if (!window.ferdi.stores.services.active) return;
+
+          // Focus webview so find in page popup gets focused
+          window.ferdi.stores.services.active.webview.focus();
+
+          const currentService = window.ferdi.stores.services.active.id;
+          window.ferdi.actions.service.sendIPCMessage({
+            serviceId: currentService,
+            channel: 'find-in-page',
+            args: {},
+          });
+        },
+      },
+      {
+        type: 'separator',
+      },
+      {
         label: intl.formatMessage(menuItems.back),
         accelerator: 'CmdOrCtrl+Left',
         click() {
@@ -584,6 +609,27 @@ const _titleBarTemplateFactory = (intl, locked) => [
         type: 'separator',
       },
       {
+        label: intl.formatMessage(menuItems.findInPage),
+        accelerator: 'CmdOrCtrl+F',
+        click() {
+          // Check if there is a service active
+          if (!window.ferdi.stores.services.active) return;
+
+          // Focus webview so find in page popup gets focused
+          window.ferdi.stores.services.active.webview.focus();
+
+          const currentService = window.ferdi.stores.services.active.id;
+          window.ferdi.actions.service.sendIPCMessage({
+            serviceId: currentService,
+            channel: 'find-in-page',
+            args: {},
+          });
+        },
+      },
+      {
+        type: 'separator',
+      },
+      {
         label: intl.formatMessage(menuItems.back),
         accelerator: 'CmdOrCtrl+Left',
         click() {
@@ -861,7 +907,7 @@ export default class FranzMenu {
         },
       }, {
         type: 'separator',
-        visible: touchIdEnabled
+        visible: touchIdEnabled,
       });
     }
 
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 07d29f477..79392e20e 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -1,10 +1,11 @@
 /* eslint-disable import/first */
-import { ipcRenderer } from 'electron';
+import { ipcRenderer, remote } from 'electron';
 import path from 'path';
 import { autorun, computed, observable } from 'mobx';
 import fs from 'fs-extra';
 import { loadModule } from 'cld3-asm';
 import { debounce } from 'lodash';
+import { FindInPage } from 'electron-find';
 
 // For some services darkreader tries to use the chrome extension message API
 // This will cause the service to fail loading
@@ -47,6 +48,7 @@ class RecipeController {
     'settings-update': 'updateAppSettings',
     'service-settings-update': 'updateServiceSettings',
     'get-service-id': 'serviceIdEcho',
+    'find-in-page': 'openFindInPage',
   };
 
   universalDarkModeInjected = false;
@@ -61,6 +63,8 @@ class RecipeController {
 
   cldIdentifier = null;
 
+  findInPage = null;
+
   async initialize() {
     Object.keys(this.ipcEvents).forEach((channel) => {
       ipcRenderer.on(channel, (...args) => {
@@ -73,6 +77,13 @@ class RecipeController {
     setTimeout(() => ipcRenderer.sendToHost('hello'), 100);
     await spellchecker();
     autorun(() => this.update());
+
+    document.addEventListener('DOMContentLoaded', () => {
+      this.findInPage = new FindInPage(remote.getCurrentWebContents(), {
+        inputFocusColor: '#CE9FFC',
+        textColor: '#212121',
+      });
+    });
   }
 
   loadRecipeModule(event, config, recipe) {
@@ -125,6 +136,10 @@ class RecipeController {
     }
   }
 
+  openFindInPage() {
+    this.findInPage.openFindWindow();
+  }
+
   update() {
     debug('enableSpellchecking', this.settings.app.enableSpellchecking);
     debug('isDarkModeEnabled', this.settings.service.isDarkModeEnabled);