feat: add code block copy button and popup markdown previewer with history

background/messages.js

@@ -26,22 +26,30 @@ md.messages = ({storage: {defaults, state, set}, compilers, mathjax, xhr, webreq
       })
     }
     else if (req.message === 'prism') {
-      chrome.scripting.executeScript({
-        target: {tabId: sender.tab.id},
-        files: [
-          `/vendor/prism/prism-${req.language}.min.js`,
-        ],
-        injectImmediately: true
-      }, sendResponse)
+      if (sender.tab) {
+        chrome.scripting.executeScript({
+          target: {tabId: sender.tab.id},
+          files: [
+            `/vendor/prism/prism-${req.language}.min.js`,
+          ],
+          injectImmediately: true
+        }, sendResponse)
+      } else {
+        sendResponse()
+      }
     }
     else if (req.message === 'mathjax') {
-      chrome.scripting.executeScript({
-        target: {tabId: sender.tab.id},
-        files: [
-          `/vendor/mathjax/extensions/${req.extension}.js`,
-        ],
-        injectImmediately: true
-      }, sendResponse)
+      if (sender.tab) {
+        chrome.scripting.executeScript({
+          target: {tabId: sender.tab.id},
+          files: [
+            `/vendor/mathjax/extensions/${req.extension}.js`,
+          ],
+          injectImmediately: true
+        }, sendResponse)
+      } else {
+        sendResponse()
+      }
     }
 
     // popup

background/storage.js

@@ -82,10 +82,19 @@ md.storage.bug = (res) => {
   // reload extension bug
   chrome.permissions.getAll((permissions) => {
     var origins = Object.keys(res.origins || {})
-    chrome.permissions.remove({
-      origins: permissions.origins
-        .filter((origin) => origins.indexOf(origin.slice(0, -2)) === -1)
-    })
+    var originsToRemove = (permissions.origins || [])
+      .filter((origin) => origins.indexOf(origin.slice(0, -2)) === -1)
+    if (originsToRemove.length) {
+      var promise = chrome.permissions.remove({
+        origins: originsToRemove
+      }, () => {
+        // Ignore error when trying to remove required permissions
+        var error = chrome.runtime.lastError
+      })
+      if (promise && promise.catch) {
+        promise.catch(() => {})
+      }
+    }
   })
 }
 

build/docx-preview/build.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+cd "$(dirname "$0")"
+npm ci 2> /dev/null || npm i
+cp node_modules/docx-preview/dist/docx-preview.min.js ../../vendor/docx-preview.min.js
+rm -rf node_modules/

build/docx-preview/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "docx-preview": "0.1.20"
+  }
+}

build/jszip/build.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+cd "$(dirname "$0")"
+npm ci 2> /dev/null || npm i
+cp node_modules/jszip/dist/jszip.min.js ../../vendor/jszip.min.js
+rm -rf node_modules/

build/jszip/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "jszip": "3.10.1"
+  }
+}

build/mammoth/build.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+# set current working directory to directory of the shell script
+cd "$(dirname "$0")"
+
+# before
+npm ci 2> /dev/null || npm i
+
+# copy
+cp node_modules/mammoth/mammoth.browser.min.js ../../vendor/mammoth.browser.min.js
+
+# after
+rm -rf node_modules/

build/mammoth/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "mammoth": "1.11.0"
+  }
+}

build/package.sh

@@ -27,6 +27,9 @@ sh csso/build.sh
 sh markdown-it/build.sh
 sh marked/build.sh
 sh mathjax/build.sh
+sh mammoth/build.sh
+sh jszip/build.sh
+sh docx-preview/build.sh
 sh mdc/build.sh
 sh mermaid/build.sh
 sh mithril/build.sh

content/index.css

@@ -359,3 +359,211 @@ img.emojione {
   /* prevent img stretch */
   width: auto;
 }
+
+/*---------------------------------------------------------------------------*/
+/*copy button*/
+
+#_html pre {
+  position: relative;
+}
+
+#_html pre .markdown-copy-button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  opacity: 0;
+  transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+  border: 1px solid var(--copy-btn-border);
+  background-color: var(--copy-btn-bg);
+  color: var(--copy-btn-color);
+  padding: 6px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  user-select: none;
+  -webkit-user-select: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+/* Show button on pre hover and focus */
+#_html pre:hover .markdown-copy-button,
+#_html pre .markdown-copy-button:focus {
+  opacity: 1;
+}
+
+#_html pre .markdown-copy-button:hover {
+  background-color: var(--copy-btn-bg-hover);
+  border-color: var(--copy-btn-border-hover);
+  color: var(--copy-btn-color-hover);
+}
+
+#_html pre .markdown-copy-button.copied {
+  background-color: var(--copy-btn-bg-copied);
+  border-color: var(--copy-btn-border-copied);
+  color: var(--copy-btn-color-copied);
+}
+
+/* Base Theme Variables */
+body {
+  --copy-btn-bg: rgba(255, 255, 255, 0.85);
+  --copy-btn-bg-hover: rgba(240, 240, 240, 0.95);
+  --copy-btn-border: #e1e4e8;
+  --copy-btn-border-hover: #b0b5bc;
+  --copy-btn-color: #57606a;
+  --copy-btn-color-hover: #24292f;
+  --copy-btn-bg-copied: #dcffe4;
+  --copy-btn-border-copied: #85e89d;
+  --copy-btn-color-copied: #22863a;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    --copy-btn-bg: rgba(33, 38, 45, 0.85);
+    --copy-btn-bg-hover: rgba(48, 54, 61, 0.95);
+    --copy-btn-border: #30363d;
+    --copy-btn-border-hover: #8b949e;
+    --copy-btn-color: #8b949e;
+    --copy-btn-color-hover: #c9d1d9;
+    --copy-btn-bg-copied: rgba(56, 139, 253, 0.15);
+    --copy-btn-border-copied: rgba(56, 139, 253, 0.4);
+    --copy-btn-color-copied: #58a6ff;
+  }
+}
+
+._color-light {
+  --copy-btn-bg: rgba(255, 255, 255, 0.85);
+  --copy-btn-bg-hover: rgba(240, 240, 240, 0.95);
+  --copy-btn-border: #e1e4e8;
+  --copy-btn-border-hover: #b0b5bc;
+  --copy-btn-color: #57606a;
+  --copy-btn-color-hover: #24292f;
+  --copy-btn-bg-copied: #dcffe4;
+  --copy-btn-border-copied: #85e89d;
+  --copy-btn-color-copied: #22863a;
+}
+
+._color-dark {
+  --copy-btn-bg: rgba(33, 38, 45, 0.85);
+  --copy-btn-bg-hover: rgba(48, 54, 61, 0.95);
+  --copy-btn-border: #30363d;
+  --copy-btn-border-hover: #8b949e;
+  --copy-btn-color: #8b949e;
+  --copy-btn-color-hover: #c9d1d9;
+  --copy-btn-bg-copied: rgba(56, 139, 253, 0.15);
+  --copy-btn-border-copied: rgba(56, 139, 253, 0.4);
+  --copy-btn-color-copied: #58a6ff;
+}
+
+/* Drag and Drop Premium Overlay */
+.dropzone-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  pointer-events: none;
+}
+
+body._color-dark .dropzone-overlay {
+  background: rgba(15, 17, 23, 0.8);
+}
+
+.dropzone-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.dropzone-box {
+  border: 3px dashed #607d8b;
+  border-radius: 20px;
+  padding: 40px 60px;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  max-width: 80%;
+  text-align: center;
+  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transform: scale(0.9);
+}
+
+body._color-dark .dropzone-box {
+  background: rgba(30, 34, 45, 0.95);
+  border-color: #8b949e;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+.dropzone-overlay.active .dropzone-box {
+  transform: scale(1);
+}
+
+.dropzone-icon {
+  width: 64px;
+  height: 64px;
+  color: #607d8b;
+}
+
+body._color-dark .dropzone-icon {
+  color: #8b949e;
+}
+
+.dropzone-text {
+  font-family: sans-serif !important;
+  font-size: 20px;
+  font-weight: 600;
+  color: #24292f;
+  margin: 0;
+}
+
+body._color-dark .dropzone-text {
+  color: #c9d1d9;
+}
+
+.dropzone-subtext {
+  font-family: sans-serif !important;
+  font-size: 14px;
+  color: #57606a;
+  margin: 0;
+}
+
+body._color-dark .dropzone-subtext {
+  color: #8b949e;
+}
+
+/* DOCX Mode full page overrides */
+body.docx-mode {
+  padding: 0 !important;
+  margin: 0 !important;
+  background: #f4f4f4 !important; /* light gray desktop background */
+}
+
+body.docx-mode #_html {
+  visibility: visible !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box !important;
+  display: block !important;
+}
+
+body.docx-mode #_toc {
+  display: none !important;
+}
+