feat: add command to popup (#1)

whale4113 · May 22, 2024 · f85f7ea · f85f7ea
1 parent 181a0ef
commit f85f7ea
Show file tree

Hide file tree

Showing 14 changed files with 268 additions and 173 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,8 @@
 {
   "[html]": {
     "editor.defaultFormatter": "vscode.html-language-features"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/apps/chrome-extension/_locales/en/messages.json b/apps/chrome-extension/_locales/en/messages.json
@@ -1,8 +1,8 @@
 {
-  "download_as_markdown": {
+  "download_docx_as_markdown": {
     "message": "Download as Markdown"
   },
-  "copy_as_markdown": {
+  "copy_docx_as_markdown": {
     "message": "Copy as Markdown"
   },
   "by_me_a_coffee": {

diff --git a/apps/chrome-extension/_locales/zh_CN/messages.json b/apps/chrome-extension/_locales/zh_CN/messages.json
@@ -1,8 +1,8 @@
 {
-  "download_as_markdown": {
+  "download_docx_as_markdown": {
     "message": "下载为 Markdown"
   },
-  "copy_as_markdown": {
+  "copy_docx_as_markdown": {
     "message": "复制为 Markdown"
   },
   "by_me_a_coffee": {

diff --git a/apps/chrome-extension/babel.config.json b/apps/chrome-extension/babel.config.json
@@ -1,11 +1,5 @@
 {
   "presets": [
-    [
-      "@babel/preset-typescript",
-      {
-        "optimizeConstEnums": true
-      }
-    ],
     [
       "@babel/preset-env",
       {

diff --git a/apps/chrome-extension/package.json b/apps/chrome-extension/package.json
@@ -14,13 +14,13 @@
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@babel/preset-env": "^7.24.0",
-    "@babel/preset-typescript": "^7.23.3",
     "@dolphin/eslint-config": "workspace:^",
     "@dolphin/typescript-config": "workspace:^",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "chrome-types": "^0.1.255",
     "glob": "^10.3.10",
     "rollup": "^4.12.1"

diff --git a/apps/chrome-extension/popup.html b/apps/chrome-extension/popup.html
@@ -1,88 +1,112 @@
 <html>
-  <body>
-    <ul>
-      <li>
-        <svg
-          aria-hidden="true"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          class="icon"
-        >
-          <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
-          <path
-            d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-          ></path>
-        </svg>
-        <a
-          href="https://github.com/lujunji4113/cloud-document-converter"
-          target="_blank"
-          data-locale="help_and_feedback"
-          >Help and Feedback</a
-        >
-      </li>
-      <li>
-        <svg
-          aria-hidden="true"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          class="icon icon-heart"
-        >
-          <path
-            d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"
-          ></path>
-        </svg>
-        <a
-          href="https://www.buymeacoffee.com/lujunji"
-          target="_blank"
-          data-locale="by_me_a_coffee"
-          >By me a coffee</a
-        >
-      </li>
-    </ul>
-    <style>
-      :root {
-        --text-primary: #3a3c42;
-      }
 
-      .icon {
-        margin-right: 8px;
-      }
+<body>
+  <ul>
+    <li>
+      <svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-copy" viewBox="0 0 16 16" width="16"
+        height="16" fill="currentColor">
+        <path
+          d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z">
+        </path>
+        <path
+          d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
+        </path>
+      </svg>
+      <button id="copy_docx_as_markdown" data-locale="copy_docx_as_markdown">Copy as
+        Markdown</button>
+    </li>
+    <li>
+      <svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-download" viewBox="0 0 16 16"
+        width="16" height="16" fill="currentColor">
+        <path
+          d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z">
+        </path>
+        <path
+          d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z">
+        </path>
+      </svg>
+      <button id="download_docx_as_markdown" data-locale="download_docx_as_markdown">Download as
+        Markdown</button>
+    </li>
+    <li>
+      <svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-issue-opened" viewBox="0 0 16 16"
+        width="16" height="16" fill="currentColor">
+        <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
+        <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>
+      </svg>
+      <a href="https://github.com/lujunji4113/cloud-document-converter" target="_blank"
+        data-locale="help_and_feedback">Help and Feedback</a>
+    </li>
+    <li>
+      <svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-heart" viewBox="0 0 16 16" width="16"
+        height="16" fill="currentColor">
+        <path
+          d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z">
+        </path>
+      </svg>
+      <a href="https://www.buymeacoffee.com/lujunji" target="_blank" data-locale="by_me_a_coffee">By me a coffee</a>
+    </li>
+  </ul>
+  <style>
+    :root {
+      --text-primary: #3a3c42;
+    }
 
-      .icon-heart {
-        fill: rgb(219, 97, 162);
-      }
+    .octicon {
+      margin-right: 8px;
 
-      body {
-        min-width: 200px;
-        margin: 0px;
-        font-size: 16px;
-      }
+      display: inline-block;
+      user-select: none;
+      vertical-align: text-bottom;
+      overflow: visible
+    }
 
-      ul {
-        list-style: none;
-        padding: 0px;
-        margin: 0px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: start;
-      }
+    .octicon-heart {
+      fill: rgb(219, 97, 162);
+    }
 
-      li {
-        padding: 8px;
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: center;
-      }
+    body {
+      width: max-content;
+      margin: 0px;
+      font-size: 16px;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
 
-      a {
-        text-decoration: none;
-        color: var(--text-primary);
-      }
-    </style>
-    <script src="popup.js"></script>
-  </body>
-</html>
+    ul {
+      list-style: none;
+      padding: 0px;
+      margin: 0px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: start;
+    }
+
+    li {
+      padding: 8px;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    a {
+      text-decoration: none;
+      color: var(--text-primary);
+    }
+
+    button {
+      padding: 0px;
+      margin: 0px;
+      border-width: 0px;
+
+      background-color: transparent;
+      color: var(--text-primary);
+      font-size: inherit;
+      cursor: pointer;
+    }
+  </style>
+  <script src="popup.js"></script>
+</body>
+
+</html>
diff --git a/apps/chrome-extension/popup.js b/apps/chrome-extension/popup.js
@@ -1,3 +1,25 @@
 document.querySelectorAll('[data-locale]').forEach(elem => {
   elem.innerText = chrome.i18n.getMessage(elem.dataset.locale)
 })
+
+const copyButton = document.getElementById('copy_docx_as_markdown')
+if (copyButton) {
+  const handleCopy = async () => {
+    await chrome.runtime.sendMessage({ flag: 'copy_docx_as_markdown' })
+
+    window.close()
+  }
+
+  copyButton.addEventListener('click', handleCopy)
+}
+
+const downloadButton = document.getElementById('download_docx_as_markdown')
+if (downloadButton) {
+  const handleDownload = async () => {
+    await chrome.runtime.sendMessage({ flag: 'download_docx_as_markdown' })
+
+    window.close()
+  }
+
+  downloadButton.addEventListener('click', handleDownload)
+}
diff --git a/apps/chrome-extension/rollup.config.mjs b/apps/chrome-extension/rollup.config.mjs
@@ -1,5 +1,6 @@
 import { defineConfig } from 'rollup'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
+import typescript from '@rollup/plugin-typescript'
 import commonjs from '@rollup/plugin-commonjs'
 import { babel } from '@rollup/plugin-babel'
 import terser from '@rollup/plugin-terser'
@@ -8,11 +9,11 @@ import { globSync } from 'glob'
 const isDev = process.env.BUILD === 'development'
 
 const sharedPlugins = [
+  typescript(),
   babel({
     babelHelpers: 'bundled',
     // TODO: Exclude node_modules once https://github.com/babel/babel/issues/9419 is resolved
     exclude: [/node_modules\/core-js/],
-    extensions: ['.js', '.mjs', '.ts'],
   }),
   commonjs(),
   ...(isDev ? [] : [terser()]),

diff --git a/apps/chrome-extension/src/background.ts b/apps/chrome-extension/src/background.ts
@@ -8,7 +8,7 @@ enum MenuItemId {
 chrome.runtime.onInstalled.addListener(() => {
   chrome.contextMenus.create({
     id: MenuItemId.DOWNLOAD_DOCX_AS_MARKDOWN,
-    title: chrome.i18n.getMessage('download_as_markdown'),
+    title: chrome.i18n.getMessage('download_docx_as_markdown'),
     documentUrlPatterns: [
       'https://*.feishu.cn/*',
       'https://*.feishu.net/*',
@@ -21,7 +21,7 @@ chrome.runtime.onInstalled.addListener(() => {
 
   chrome.contextMenus.create({
     id: MenuItemId.COPY_DOCX_AS_MARKDOWN,
-    title: chrome.i18n.getMessage('copy_as_markdown'),
+    title: chrome.i18n.getMessage('copy_docx_as_markdown'),
     documentUrlPatterns: [
       'https://*.feishu.cn/*',
       'https://*.feishu.net/*',
@@ -33,27 +33,44 @@ chrome.runtime.onInstalled.addListener(() => {
   })
 })
 
-chrome.contextMenus.onClicked.addListener(({ menuItemId }, tab) => {
-  if (!tab?.id) {
-    return
-  }
-
-  switch (menuItemId) {
+const executeScriptByFlag = (flag: string | number, tabId: number) => {
+  switch (flag) {
     case MenuItemId.DOWNLOAD_DOCX_AS_MARKDOWN:
       chrome.scripting.executeScript({
         files: ['bundles/scripts/download-lark-docx-as-markdown.js'],
-        target: { tabId: tab.id },
+        target: { tabId },
         world: 'MAIN',
       })
       break
     case MenuItemId.COPY_DOCX_AS_MARKDOWN:
       chrome.scripting.executeScript({
         files: ['bundles/scripts/copy-lark-docx-as-markdown.js'],
-        target: { tabId: tab.id },
+        target: { tabId },
         world: 'MAIN',
       })
       break
     default:
       break
   }
+}
+
+chrome.contextMenus.onClicked.addListener(({ menuItemId }, tab) => {
+  if (tab?.id !== undefined) {
+    executeScriptByFlag(menuItemId, tab.id)
+  }
+})
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  chrome.tabs.query({ currentWindow: true, active: true }).then(activeTabs => {
+    const activeTabId = activeTabs.at(0)?.id
+
+    if (activeTabs.length === 1 && activeTabId !== undefined) {
+      sendResponse()
+
+      executeScriptByFlag(message.flag, activeTabId)
+    }
+  })
+
+  // To use `sendResponse()` asynchronously
+  return true
 })