Base with vue-webextension

.browserslistrc

+> 1%
+last 2 versions
+not dead

.eslintrc.js

+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    webextensions: true,
+  },
+  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+  parserOptions: {
+    parser: "babel-eslint",
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};

.gitignore

+.DS_Store
 node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Vue Browser Extension Output
+*.pem
+*.pub
+*.zip
+/artifacts

README.md

 # Virtual Keyboard
 
-## Setup
-`npm i`
-
 ## Development
-`npm run start:firefox`
+`npm run serve`

babel.config.js

+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

extension-dist/index.js

-const inputFields = document.getElementsByTagName('input')
-const replacements = {
-  a: "b"
-}
-// Create a simple keyboard
-const buttonA = document.createElement('button')
-buttonA.textContent = 'Insert "a"'
-const buttonB = document.createElement('button')
-buttonB.textContent = 'Insert "b"'
-const keyboard = document.createElement('div')
-keyboard.appendChild(buttonA)
-keyboard.appendChild(buttonB)
-
-let selectedInput = null
-
-addChar = (i, char) => {
-    const start = i.selectionStart
-    i.value = i.value.slice(0, start) + char + i.value.slice(i.selectionEnd)
-    // Updating the input value moves the caret to the end by default
-    i.selectionStart = i.selectionEnd = start + 1
-}
-
-for (const input of inputFields) {
-  input.onkeydown = e => {
-    const character = replacements[e.key]
-    if (!character) return
-    addChar(input, character)
-    return false
-  }
-  // Handle the case where the input is already focused
-  if (document.activeElement === input) {
-    input.parentElement.appendChild(keyboard)
-    selectedInput = input
-  }
-  input.onfocus = e => {
-    input.parentElement.appendChild(keyboard)
-    selectedInput = input
-  }
-  // https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/
-  input.ontransitionend = e => {
-    if (input.matches(':focus') || keyboard.contains(document.activeElement)) e.target.focus()
-    else {
-      input.parentElement.removeChild(keyboard)
-      selectedInput = null
-    }
-  }
-}
-
-keyboard.onclick = e => {
-  return false
-}
-buttonA.onmouseup = e => {
-  if (selectedInput) addChar(selectedInput, "a")
-}
-buttonB.onmouseup = e => {
-  if (selectedInput) addChar(selectedInput, "b")
-}

extension-dist/manifest.json

-{
-
-  "manifest_version": 2,
-  "name": "Virtual keyboard",
-  "version": "0.0.1",
-
-  "description": "Adds a customizable virtual keyboard on text input areas.",
-
-  "icons": {
-    "48": "icons/keyboard-48.png",
-    "96": "icons/keyboard-96.png"
-  },
-
-  "browser_action": {
-    "default_icon": {
-      "19": "icons/keyboard-19.png",
-      "32": "icons/keyboard-32.png"
-    },
-    "default_title": "Virtual Keyboard"
-  },
-
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"],
-      "js": ["index.js"],
-      "css": ["style.css"]
-    }
-  ]
-}

extension-dist/style.css

-input:not(:focus-within) {
-  border-color: black;
-  transition: border-color 0.001s;
-}

package.json

 {
   "name": "virtual-keyboard",
-  "version": "0.0.1",
-  "description": "Adds a customizable virtual keyboard on text input areas.",
-  "main": "extension-dist/index.js",
+  "version": "0.1.0",
+  "description": "Customizable unicode virtual keyboard on text input.",
+  "private": true,
   "scripts": {
-    "start:firefox": "web-ext run --source-dir ./extension-dist/"
+    "serve": "vue-cli-service build --mode development --watch",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "web-ext": "6.1.0"
+    "axios": "^0.20.0",
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "lint-staged": "^9.5.0",
+    "prettier": "^2.2.1",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-browser-extension": "latest",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,vue}": [
+      "vue-cli-service lint",
+      "git add"
+    ]
   }
 }

package.tmp.jspn

+{
+  "name": "virtual-keyboard",
+  "version": "0.0.1",
+  "description": "Adds a customizable virtual keyboard on text input areas.",
+  "main": "extension-dist/index.js",
+  "scripts": {
+    "start:firefox": "web-ext run --source-dir ./virtual-keyboard/"
+  },
+  "dependencies": {
+    "web-ext": "6.1.0"
+  }
+}

public/_locales/en/messages.json

+{
+  "extName": {
+    "message": "Virtual keyboard",
+    "description": ""
+  }
+}

public/browser-extension.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>