Add basic features

Author: sdvg

.browserslistrc

@@ -1,2 +1 @@
-> 1%
 last 2 versions

package-lock.json

@@ -26,6 +26,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.1.2",
+    "lodash": "^4.17.15",
     "vue-cli-plugin-browser-extension": "~0.24.0",
     "vue-template-compiler": "^2.6.11"
   }

package.json

@@ -0,0 +1,22 @@
+html {
+  background: #242424;
+  color: #b4b4b4;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: inherit;
+}
+
+ol,
+ul {
+  list-style: none;
+}

src/global.css

@@ -4,7 +4,11 @@
   "homepage_url": "http://localhost:8080/",
   "description": "A Vue Browser Extension",
   "default_locale": "en",
-  "permissions": [],
+  "permissions": [
+    "<all_urls>",
+    "bookmarks",
+    "tabs"
+  ],
   "icons": {
     "16": "icons/16.png",
     "48": "icons/48.png",
@@ -26,6 +30,16 @@
   },
   "options_ui": {
     "page": "options.html",
-    "browser_style": true
+    "chrome_style": true
+  },
+  "commands": {
+    "_execute_browser_action": {
+      "suggested_key": {
+        "windows": "Ctrl+E",
+        "mac": "Command+E",
+        "chromeos": "Ctrl+E",
+        "linux": "Ctrl+E"
+      }
+    }
   }
 }

src/manifest.json

@@ -0,0 +1,58 @@
+import { find, without } from 'lodash'
+
+const KEYMAP = {
+  enter: 13,
+  esc: 27,
+  space: 32,
+  up: 38,
+  down: 40,
+}
+
+const shortcuts = {
+  singleKey: [
+    { name: `enter`, key: KEYMAP.enter },
+    { name: `esc`, key: KEYMAP.esc },
+    { name: `space`, key: KEYMAP.space },
+    { name: `up`, key: KEYMAP.up },
+    { name: `down`, key: KEYMAP.down },
+  ],
+}
+
+let instances = []
+
+const emitShortcut = (name, event) => {
+  instances.forEach(instance => {
+    const { shortcuts } = instance.$options
+
+    if (shortcuts && typeof shortcuts[name] === `function`) {
+      shortcuts[name].call(instance, event)
+    }
+  })
+}
+
+const handleKeydownEvent = event => {
+  const findAndEmit = (shortcutsCategory, event) => {
+    const shortcut = find(shortcutsCategory, { key: event.which })
+
+    if (shortcut) {
+      emitShortcut(shortcut.name, event)
+    }
+  }
+
+  if (event.metaKey && !event.altKey) {
+    findAndEmit(shortcuts.withMeta, event)
+  } else if (!event.altKey) {
+    findAndEmit(shortcuts.singleKey, event)
+  }
+}
+
+document.addEventListener(`keydown`, handleKeydownEvent)
+
+export default {
+  created () {
+    instances.push(this)
+  },
+  destroyed () {
+    instances = without(instances, this)
+  },
+}