Huge update!

.gitignore

@@ -43,4 +43,5 @@ Icon
 .Spotlight-V100
 .Trashes
 
-.idea
+.idea
+tmp

background.html

@@ -0,0 +1,3 @@
+<script src="vendor/mobx-5.13.0.umd.js"></script>
+<script src="vendor/lodash-4.17.15-core.js"></script>
+<script type="module" src="src/VXBackgroundPage.js"></script>

content-script.js

@@ -0,0 +1,30 @@
+if (!window.vxframe) {
+  const css = String.raw
+  const frame = document.createElement('iframe')
+  frame.setAttribute(
+    'style',
+    css`
+      position: fixed;
+      top: 0px;
+      left: 0px;
+      width: calc(100vw);
+      height: 200px;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: transcript;
+      z-index: 999999999;
+      pointer-events: none;
+    `,
+  )
+  frame.src = chrome.runtime.getURL('popup.html')
+  document.body.appendChild(frame)
+  window.vxframe = frame
+  chrome.runtime.onMessage.addListener(message => {
+    if (message.disposeOverlay) {
+      window.vxframe = null
+      frame.remove()
+    }
+  })
+  chrome.runtime.sendMessage({ overlayInjected: true })
+}

manifest.json

@@ -2,6 +2,7 @@
   "manifest_version": 2,
   "name": "vxchrome",
   "version": "0.1",
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "commands": {
     "listen1": {
       "description": "Listen [first language]",
@@ -17,16 +18,17 @@
     }
   },
   "background": {
-    "scripts": ["settings.js", "background.js"]
+    "page": "background.html"
   },
-  "permissions": ["clipboardWrite", "notifications", "storage"],
+  "permissions": ["clipboardWrite", "notifications", "storage", "activeTab"],
 
   "browser_action": {
     "default_icon": "icon.png"
   },
 
   "options_ui": {
     "page": "options.html",
-    "open_in_tab": false
-  }
+    "open_in_tab": true
+  },
+  "web_accessible_resources": ["popup.html"]
 }

options.html

@@ -45,7 +45,7 @@
     <br />
     <button id="btn_save">save</button>
     <div id="status"></div>
-    <script src="settings.js"></script>
+    <script src="VXDefaultSettings.js"></script>
     <script src="options.js"></script>
   </body>
 </html>

package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@types/chrome": "^0.0.103"
+  }
+}

popup.html

@@ -7,33 +7,58 @@
     <title>vxchrome</title>
     <style>
       body {
-        background: #353433;
+        background: transparent;
         color: #e9e8e7;
         font: 18px Arimo, sans-serif;
+      }
+      .full body {
+        background: #353433;
         padding: 8px 24px;
       }
-      #log {
-        font: 16px Cousine, Menlo, monospace;
-        min-height: 100vh;
+      #vxchrome .box {
+        position: absolute;
+        z-index: 2147483647;
+        top: 40px;
+        left: 40px;
+        margin-right: 40px;
+        background: #0008;
+        font: bold 24px Arimo, Noto Sans Thai, sans-serif;
+        border-radius: 8px;
+        padding: 8px 16px;
+        color: #fff;
+        text-shadow: 0 2px 8px #000;
+        border: 2px solid #8b8685;
+        box-shadow: 0 4px 16px #000;
+        transition: 0.2s all;
+        line-height: 36px;
+        transform-origin: 0 28px;
+        transform: scale(0.95);
       }
-      #text {
-        margin: 0;
-        font: bold 32px Arimo, Noto Sans Thai, sans-serif;
-        min-height: 100vh;
+      #vxchrome .box[data-status='listening'] {
+        border-color: #bef;
       }
-      #final {
-        color: #d7fc70;
+      #vxchrome .box[data-status='listening'][data-final='true'] {
+        border-color: #d7fc70;
+        transform: scale(1);
       }
-      #listening {
+      #vxchrome .box[data-status='ended'] {
+        transform: scale(1);
+      }
+      #vxchrome .initial {
         color: #8b8685;
-        font-weight: normal;
-        font-size: 0.5em;
+      }
+      #vxchrome .final {
+        color: #d7fc70;
       }
       #actions {
+        display: none;
         position: fixed;
         bottom: 16px;
         right: 16px;
       }
+      .full #actions {
+        display: block;
+      }
       #actions button {
         border: 0;
         background: transparent;
@@ -46,11 +71,22 @@
     </style>
   </head>
   <body>
-    <p id="text">
-      <span id="interim"></span>
-      <span id="final"></span>
-      <span id="listening" hidden>(listening)</span>&nbsp;
-    </p>
+    <div id="app">
+      <div id="vxchrome">
+        <template v-if="data">
+          <div
+            class="box"
+            v-if="data.showing"
+            :data-status="data.status"
+            :data-final="data.finalTranscript ? 'true' : 'false'"
+          >
+            <span class="initial">&gt;&gt;&gt;</span>
+            <span class="final">{{ data.finalTranscript }}</span>
+            <span class="interim">{{ data.interimTranscript }}</span>
+          </div>
+        </template>
+      </div>
+    </div>
     <p id="actions">
       <button id="open-options-button">
         <svg
@@ -67,10 +103,7 @@
         </svg>
       </button>
     </p>
-
-    <pre id="log"></pre>
-    <script src="vendor/microsoft.cognitiveservices.speech.sdk.bundle.js"></script>
-    <script src="microsoft-speech.js"></script>
+    <script src="vendor/vue-2.6.11.js"></script>
     <script src="popup.js"></script>
   </body>
 </html>