diff --git a/src/ext/conf/ExtensionConf.js b/src/ext/conf/ExtensionConf.js
index fe99216..5dc1d9c 100644
--- a/src/ext/conf/ExtensionConf.js
+++ b/src/ext/conf/ExtensionConf.js
@@ -191,6 +191,7 @@ var ExtensionConf = {
         label: 'Automatic',   // example override, takes precedence over default label
         shortcut: [{
           key: 'a',
+          code: 'KeyA',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -204,7 +205,7 @@ var ExtensionConf = {
       show: true,
       path: 'crop',
     },
-  },{
+  }, {
     name: 'Reset to default',
     label: 'Reset',
     cmd: [{
@@ -216,6 +217,7 @@ var ExtensionConf = {
         show: true,
         shortcut: [{
           key: 'r',
+          code: 'KeyR',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -229,7 +231,7 @@ var ExtensionConf = {
       show: true,
       path: 'crop'
     },
-  },{
+  }, {
     name: 'Fit to width',
     label: 'Fit width',
     cmd: [{
@@ -241,6 +243,7 @@ var ExtensionConf = {
         show: true,
         shortcut: [{
           key: 'w',
+          code: 'KeyW',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -254,7 +257,7 @@ var ExtensionConf = {
       show: true,
       path: 'crop'
     }
-  },{
+  }, {
     name: 'Fit to height',
     label: 'Fit height',
     cmd: [{
@@ -266,6 +269,7 @@ var ExtensionConf = {
         show: true,
         shortcut: [{
           key: 'e',
+          code: 'KeyE',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -279,7 +283,7 @@ var ExtensionConf = {
       show: true,
       path: 'crop'
     }
-  },{
+  }, {
     name: 'Set aspect ratio to 16:9',
     label: '16:9',
     cmd: [{
@@ -292,6 +296,7 @@ var ExtensionConf = {
         show: true,
         shortcut:  [{
           key: 's',
+          code: 'KeyS',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -305,7 +310,7 @@ var ExtensionConf = {
       show: true,
       path: 'crop'
     }
-  },{
+  }, {
     name: 'Set aspect ratio to 21:9 (2.39:1)',
     label: '21:9',
     cmd: [{
@@ -318,6 +323,7 @@ var ExtensionConf = {
         show: true,
         shortcut: [{
           key: 'd',
+          code: 'KeyD',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -331,7 +337,7 @@ var ExtensionConf = {
       show: true,
       path: 'crop'
     }
-  },{
+  }, {
     name: 'Set aspect ratio to 18:9',
     label: '18:9',
     cmd: [{
@@ -344,6 +350,7 @@ var ExtensionConf = {
         show: true,
         shortcut: [{
           key: 'x',
+          code: 'KeyX',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -357,7 +364,7 @@ var ExtensionConf = {
       show: true,
       path: 'crop',
     }
-  },{
+  }, {
     name: 'Zoom in',
     label: 'Zoom',
     cmd: [{
@@ -369,6 +376,7 @@ var ExtensionConf = {
         show: false,
         shortcut: [{
           key: 'z',
+          code: 'KeyY',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -381,7 +389,7 @@ var ExtensionConf = {
     playerUi: {
       show: false,
     }
-  },{
+  }, {
     name: 'Zoom out',
     label: 'Unzoom',
     cmd: [{
@@ -393,6 +401,7 @@ var ExtensionConf = {
         show: false,
         shortcut: [{
           key: 'u',
+          code: 'KeyU',
           ctrlKey: false,
           metaKey: false,
           altKey: false, 
@@ -405,32 +414,18 @@ var ExtensionConf = {
     playerUi: {
       show: false
     }
-  },{
+  }, {
     name: 'Toggle panning mode',
     label: 'Toggle pan',
     cmd: [{
       action: 'toggle-pan',
       arg: 'toggle'
     }],
-    scopes: {
-      page: {
-        show: true,
-        shortcut: [{
-          key: 'p',
-          ctrlKey: false,
-          metaKey: false,
-          altKey: false, 
-          shiftKey: false,
-          onKeyUp: true,
-          onKeyDown: false,
-        }]
-      }
-    },
     playerUi: {
       show: true,
       path: 'zoom'
     }
-  },{
+  }, {
     name: 'Hold to pan',
     cmd: [{
       action: 'pan',
@@ -479,7 +474,7 @@ var ExtensionConf = {
       show: true,
       path: 'stretch'
     }
-  },{
+  }, {
     name: 'Set stretch to "basic"',
     label: 'Basic stretch',
     cmd: [{
@@ -504,7 +499,7 @@ var ExtensionConf = {
       show: true,
       path: 'stretch'
     }
-  },{
+  }, {
     name: 'Set stretch to "hybrid"',
     label: 'Hybrid stretch',
     cmd: [{
@@ -529,7 +524,7 @@ var ExtensionConf = {
       show: true,
       path: 'stretch'
     }
-  },{
+  }, {
     name: 'Stretch only to hide thin borders',
     label: 'Thin borders only',
     cmd: [{
@@ -554,7 +549,7 @@ var ExtensionConf = {
       show: true,
       path: 'stretch'
     }
-  },{
+  }, {
     name: 'Set stretch to default value',
     label: 'Default',
     cmd: [{
@@ -592,7 +587,7 @@ var ExtensionConf = {
       show: true,
       path: 'align'
     }
-  },{
+  }, {
     name: 'Align video to center',
     label: 'Center',
     cmd: [{
@@ -614,7 +609,7 @@ var ExtensionConf = {
       show: true,
       path: 'align'
     }
-  },{
+  }, {
     name: 'Align video to the right',
     label: 'Right',
     cmd: [{
@@ -636,7 +631,7 @@ var ExtensionConf = {
       show: true,
       path: 'align'
     }
-  },{
+  }, {
     name: 'Use default alignment',
     label: 'Default',
     cmd: [{
@@ -669,7 +664,7 @@ var ExtensionConf = {
         show: true,
       }
     }
-  },{
+  }, {
     name: 'Enable extension on whitelisted sites only',
     label: 'On whitelist only',
     cmd: [{
@@ -682,7 +677,7 @@ var ExtensionConf = {
         show: true
       }
     }
-  },{
+  }, {
     name: 'Extension mode: use default settings',
     label: 'Default',
     cmd: [{
@@ -695,7 +690,7 @@ var ExtensionConf = {
         show: true
       }
     }
-  },{
+  }, {
     name: 'Disable extension',
     label: 'Disable',
     cmd: [{
@@ -711,7 +706,7 @@ var ExtensionConf = {
         show: true,
       }
     }
-  },{
+  }, {
     name: 'Enable automatic aspect ratio detection',
     label: 'Enable',
     cmd: [{
@@ -727,7 +722,7 @@ var ExtensionConf = {
         show: true
       }
     }
-  },{
+  }, {
     name: 'Enable automatic aspect ratio detection on whitelisted sites only',
     label: 'On whitelist only',
     cmd: [{
@@ -740,7 +735,7 @@ var ExtensionConf = {
         show: true,
       }
     }
-  },{
+  }, {
     name: 'Use default settings for automatic aspect ratio detection',
     label: 'Default',
     cmd: [{
@@ -753,7 +748,7 @@ var ExtensionConf = {
         show: true,
       }
     }
-  },{
+  }, {
     name: 'Disable automatic aspect ratio detection',
     label: 'Disable',
     cmd: [{
@@ -792,7 +787,7 @@ var ExtensionConf = {
         show: true,
       }
     }
-  },{
+  }, {
     name: 'Enable keyboard shortcuts on whitelisted sites only',
     label: 'On whitelist only',
     cmd: [{
@@ -804,7 +799,7 @@ var ExtensionConf = {
         show: true
       },
     }
-  },{
+  }, {
     name: 'Keyboard shortcuts mode: use default settings',
     label: 'Default',
     cmd: [{
@@ -816,7 +811,7 @@ var ExtensionConf = {
         show: true
       }
     }
-  },{
+  }, {
     name: 'Disable keyboard shortcuts',
     label: 'Disable',
     cmd: [{
diff --git a/src/ext/lib/ActionHandler.js b/src/ext/lib/ActionHandler.js
index 2048d8e..789875e 100644
--- a/src/ext/lib/ActionHandler.js
+++ b/src/ext/lib/ActionHandler.js
@@ -192,8 +192,8 @@ class ActionHandler {
            shortcut.altKey   === event.altKey  &&
            shortcut.shiftKey === event.shiftKey
   }
-  isActionMatchKeycode(shortcut, event) {
-    return shortcut.keyCode  === event.key     &&
+  isActionMatchKeyCode(shortcut, event) {
+    return shortcut.code     === event.code    &&
            shortcut.ctrlKey  === event.ctrlKey &&
            shortcut.metaKey  === event.metaKey &&
            shortcut.altKey   === event.altKey  &&
@@ -201,11 +201,11 @@ class ActionHandler {
   }
 
   isActionMatch(shortcut, event, isLatin = true) {
-    // ASCII and symbols fall back to keycode matching, because we don't know for sure that
+    // ASCII and symbols fall back to key code matching, because we don't know for sure that
     // regular matching by key is going to work
     return isLatin ? 
       this.isActionMatchStandard(shortcut, event) : 
-      this.isActionMatchStandard(shortcut, event) || this.isActionMatchKeycode(shortcut, event);
+      this.isActionMatchStandard(shortcut, event) || this.isActionMatchKeyCode(shortcut, event);
   }
 
   execAction(actions, event, videoData) {
diff --git a/src/options/App.vue b/src/options/App.vue
index e75b582..7408a80 100644
--- a/src/options/App.vue
+++ b/src/options/App.vue
@@ -109,6 +109,8 @@
 </template>
 
 <script>
+import ControlsSettings from './controls-settings/ControlsSettings';
+import GeneralSettings from './GeneralSettings';
 import Donate from '../common/misc/Donate.vue';
 import SuperAdvancedSettings from './SuperAdvancedSettings.vue';
 import Debug from '../ext/conf/Debug.js';
diff --git a/src/options/controls-settings/scope-settings-component/ScopeSettings.vue b/src/options/controls-settings/scope-settings-component/ScopeSettings.vue
index b3aa10d..5ed19c0 100644
--- a/src/options/controls-settings/scope-settings-component/ScopeSettings.vue
+++ b/src/options/controls-settings/scope-settings-component/ScopeSettings.vue
@@ -39,12 +39,11 @@
 </template>
 
 <script>
-import SetShortcutButton from './SetShortcutButton.vue';
-
+import SetShortcutButton from './SetShortcutButton';
 
 export default {
   components: {
-    SetShortcutButton
+    SetShortcutButton,
   },
   props: {
     scopeOptions: Object,
diff --git a/src/options/controls-settings/scope-settings-component/SetShortcutButton.vue b/src/options/controls-settings/scope-settings-component/SetShortcutButton.vue
index d32b89c..263ab36 100644
--- a/src/options/controls-settings/scope-settings-component/SetShortcutButton.vue
+++ b/src/options/controls-settings/scope-settings-component/SetShortcutButton.vue
@@ -38,7 +38,7 @@ export default {
       if (this.waitingForPress) {
         const shortcut = {
           key: event.key,
-          keyCode: event.keyCode,
+          code: event.code,
           ctrlKey: event.ctrlKey,
           metaKey: event.metaKey,
           altKey: event.altKey,