Merge pull request #21 from whale4113/feat/lujunji/support-firefox-ex…

…tension

feat: support firefox extension

.changeset/fluffy-tigers-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@dolphin/chrome-extension': patch
+---
+
+fix(chrome-extension): insert syntax for missing brackets

.changeset/friendly-ties-serve.md

@@ -0,0 +1,5 @@
+---
+'@dolphin/chrome-extension': patch
+---
+
+fix(chrome-extension): no permission to copy

.changeset/witty-pugs-grin.md

@@ -0,0 +1,5 @@
+---
+'@dolphin/chrome-extension': minor
+---
+
+feat(chrome-extension): support for firefox extension

.devcontainer/devcontainer.json

@@ -1,5 +1,4 @@
 {
 	"name": "Node.js & TypeScript",
 	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm",
-	"postCreateCommand": "npm install -g [email protected]"
-}
+  "postCreateCommand": "npm install -g [email protected] && curl -fsSL https://bun.sh/install | bash",

.github/workflows/create-github-releases.yml

@@ -10,7 +10,6 @@ permissions:
 
 jobs:
   chrome-extension:
-    if: startsWith(github.ref_name, '@dolphin/chrome-extension')
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -25,18 +24,32 @@ jobs:
           node-version: 20
           cache: pnpm
 
+      - name: Setup Bun Runtime
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
       - name: Install dependencies
         run: pnpm install
 
-      - name: Build
-        run: pnpm run build
+      - name: Build chrome extension
+        working-directory: apps/chrome-extension
+        run: npx turbo run build
+
+      - name: Build firefox extension
+        working-directory: apps/chrome-extension
+        run: pnpm run build:firefox
+
+      - name: Package chrome extension
+        working-directory: apps/chrome-extension
+        run: npx web-ext build --source-dir dist --filename {name}-{version}-chrome.zip
 
-      - name: Zip chrome extension
+      - name: Package firefox extension
         working-directory: apps/chrome-extension
-        run: (cd dist && zip -r ../chrome-extension.zip .)
+        run: npx web-ext build --source-dir dist-firefox --filename {name}-{version}-firefox.zip
 
       - name: Create Github release
         uses: softprops/action-gh-release@v2
         with:
           body: Please refer to [CHANGELOG.md](https://github.com/lujunji4113/cloud-document-converter/blob/main/apps/chrome-extension/CHANGELOG.md) for details.
-          files: apps/chrome-extension/chrome-extension.zip
+          files: apps/chrome-extension/web-ext-artifacts/*.zip

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <p align="center">
-   <img width="150" height="150" src="apps/chrome-extension/images/logo.svg" alt="Logo">
+   <img width="150" height="150" src="apps/chrome-extension/design/logo.svg" alt="Logo">
   </p>
 	<h1 align="center"><b>Cloud Document Converter</b></h1>
 </p>

README_ZH.md

@@ -1,6 +1,6 @@
 <p align="center">
   <p align="center">
-   <img width="150" height="150" src="apps/chrome-extension/images/logo.svg" alt="Logo">
+   <img width="150" height="150" src="apps/chrome-extension/design/logo.svg" alt="Logo">
   </p>
 	<h1 align="center"><b>Cloud Document Converter</b></h1>
 </p>

apps/chrome-extension/.gitignore

@@ -1,2 +1,6 @@
 # bundles
 bundles
+
+dist-firefox
+
+web-ext-artifacts

apps/chrome-extension/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@dolphin/chrome-extension",
   "version": "1.7.0",
+  "type": "module",
   "scripts": {
-    "clean": "rm -rf bundles dist/*",
+    "clean": "rm -rf bundles/* dist/* dist-firefox/*",
     "copy": "cp -R _locales bundles images manifest.json popup.html popup.js dist",
-    "build": "rollup -c && mkdir -p dist && npm run copy && node ./scripts/add-version.mjs",
-    "build:dev": "rollup -c --environment BUILD:development && mkdir -p dist && npm run copy && node ./scripts/add-version.mjs",
+    "build": "rollup -c && mkdir -p dist && npm run copy && bun run ./scripts/add-version.ts",
+    "build:firefox": "bun run ./scripts/build-firefox.ts",
+    "build:dev": "rollup -c --environment BUILD:development && mkdir -p dist && npm run copy && bun run ./scripts/add-version.ts",
     "type-check": "tsc --noEmit",
     "lint": "eslint src/**",
     "format": "prettier . --write --ignore-path ./.gitignore --ignore-path ../../.gitignore",
@@ -21,9 +23,12 @@
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "chrome-types": "^0.1.316",
+    "@types/node": "^22.9.3",
+    "chrome-types": "0.1.321",
+    "execa": "^9.5.1",
     "glob": "^10.4.5",
-    "rollup": "^4.24.4"
+    "rollup": "^4.24.4",
+    "web-ext": "^8.3.0"
   },
   "dependencies": {
     "@dolphin/common": "workspace:^",

apps/chrome-extension/rollup.config.mjs → apps/chrome-extension/rollup.config.js

@@ -8,16 +8,24 @@ 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/],
-  }),
-  commonjs(),
-  ...(isDev ? [] : [terser()]),
-]
+const createSharedPlugins = (options = {}) => {
+  const { runtime } = options
+
+  const sharedPlugins = [
+    typescript({
+      tsconfig: `tsconfig.${runtime}.json`,
+    }),
+    babel({
+      babelHelpers: 'bundled',
+      // TODO: Exclude node_modules once https://github.com/babel/babel/issues/9419 is resolved
+      exclude: [/node_modules\/core-js/],
+    }),
+    commonjs(),
+    ...(isDev ? [] : [terser()]),
+  ]
+
+  return sharedPlugins
+}
 
 export default defineConfig([
   {
@@ -27,14 +35,14 @@ export default defineConfig([
       dir: 'bundles',
       format: 'esm',
     },
-    plugins: [...sharedPlugins],
+    plugins: [...createSharedPlugins({ runtime: 'extension' })],
   },
   ...globSync('src/scripts/*.ts').map(input => ({
     input,
     output: {
       dir: 'bundles/scripts',
       format: 'iife',
     },
-    plugins: [nodeResolve(), ...sharedPlugins],
+    plugins: [nodeResolve(), ...createSharedPlugins({ runtime: 'web' })],
   })),
 ])

apps/chrome-extension/scripts/add-version.mjs → apps/chrome-extension/scripts/add-version.ts

@@ -1,10 +1,10 @@
 import fs from 'node:fs'
 import { fileURLToPath } from 'node:url'
 
-const resolveRelativePath = relativePath =>
+const resolveRelativePath = (relativePath: string) =>
   fileURLToPath(new URL(`../${relativePath}`, import.meta.url))
 
-const readJson = relativePath => {
+const readJson = (relativePath: string): { version: string } | null => {
   try {
     const filePath = resolveRelativePath(relativePath)
     const fileContent = fs.readFileSync(filePath, 'utf8')
@@ -16,7 +16,7 @@ const readJson = relativePath => {
 }
 
 const main = () => {
-  let manifestJson = readJson('dist/manifest.json')
+  const manifestJson = readJson('dist/manifest.json')
   const packageJson = readJson('package.json')
   if (!manifestJson || !packageJson) return
 

apps/chrome-extension/scripts/build-firefox.ts

@@ -0,0 +1,70 @@
+import { execa } from 'execa'
+import fs from 'fs'
+
+interface Manifest {
+  background:
+    | {
+        scripts: string[]
+      }
+    | {
+        service_worker: string
+      }
+  browser_specific_settings: {
+    gecko: {
+      id: string
+    }
+  }
+}
+
+const main = async () => {
+  for await (const line of execa('npx', ['turbo', 'run', 'build'])) {
+    console.log(line)
+  }
+
+  await execa('cp', [
+    '-r',
+    ...(await fs.promises
+      .readdir('dist')
+      .then(paths => paths.map(path => `dist/${path}`))),
+    'dist-firefox',
+  ])
+  console.log('building: copy dist to dist-firefox')
+
+  const chromeManifestFilePath = './dist/manifest.json'
+  const firefoxManifestFilePath = './dist-firefox/manifest.json'
+
+  const manifest: Manifest = JSON.parse(
+    await fs.promises.readFile(chromeManifestFilePath, { encoding: 'utf-8' }),
+  )
+
+  if ('service_worker' in manifest.background) {
+    manifest.background = {
+      scripts: [manifest.background.service_worker],
+    }
+  }
+
+  manifest.browser_specific_settings = {
+    gecko: {
+      id: '[email protected]',
+    },
+  }
+
+  await fs.promises.writeFile(
+    firefoxManifestFilePath,
+    JSON.stringify(manifest),
+    {
+      encoding: 'utf-8',
+    },
+  )
+
+  for await (const line of execa('npx', [
+    'web-ext',
+    'lint',
+    '--source-dir',
+    'dist-firefox',
+  ])) {
+    console.log(`web-ext lint: ${line}`)
+  }
+}
+
+main()

apps/chrome-extension/src/background.ts

@@ -1,4 +1,4 @@
-/// <reference types="chrome-types" />
+import { Flag, Message } from './common/message'
 
 enum MenuItemId {
   DOWNLOAD_DOCX_AS_MARKDOWN = 'download_docx_as_markdown',
@@ -33,17 +33,17 @@ chrome.runtime.onInstalled.addListener(() => {
   })
 })
 
-const executeScriptByFlag = (flag: string | number, tabId: number) => {
+const executeScriptByFlag = async (flag: string | number, tabId: number) => {
   switch (flag) {
     case MenuItemId.DOWNLOAD_DOCX_AS_MARKDOWN:
-      chrome.scripting.executeScript({
+      await chrome.scripting.executeScript({
         files: ['bundles/scripts/download-lark-docx-as-markdown.js'],
         target: { tabId },
         world: 'MAIN',
       })
       break
     case MenuItemId.COPY_DOCX_AS_MARKDOWN:
-      chrome.scripting.executeScript({
+      await chrome.scripting.executeScript({
         files: ['bundles/scripts/copy-lark-docx-as-markdown.js'],
         target: { tabId },
         world: 'MAIN',
@@ -60,17 +60,28 @@ chrome.contextMenus.onClicked.addListener(({ menuItemId }, tab) => {
   }
 })
 
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-  chrome.tabs.query({ currentWindow: true, active: true }).then(activeTabs => {
-    const activeTabId = activeTabs.at(0)?.id
+chrome.runtime.onMessage.addListener((_message, sender, sendResponse) => {
+  const message = _message as Message
 
-    if (activeTabs.length === 1 && activeTabId !== undefined) {
-      sendResponse()
+  if (
+    message.flag === Flag.ExecuteCopyScript ||
+    message.flag === Flag.ExecuteDownloadScript
+  ) {
+    const executeScript = async () => {
+      const activeTabs = await chrome.tabs.query({
+        currentWindow: true,
+        active: true,
+      })
+
+      const activeTabId = activeTabs.at(0)?.id
 
-      executeScriptByFlag(message.flag, activeTabId)
+      if (activeTabs.length === 1 && activeTabId !== undefined) {
+        await executeScriptByFlag(message.flag, activeTabId)
+      }
     }
-  })
 
-  // To use `sendResponse()` asynchronously
-  return true
+    executeScript().then(sendResponse)
+
+    return true
+  }
 })

apps/chrome-extension/src/chrome-types.d.ts

@@ -0,0 +1 @@
+/// <reference types="chrome-types" />