feat: support firefox build

apps/joplin-search-integration/.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+dist-firefox
 dist-ssr
 *.local
 

apps/joplin-search-integration/package.json

@@ -8,25 +8,30 @@
     "build": "vite build",
     "pack-zip": "rimraf extension.zip && jszip-cli add dist/ -o ./extension.zip",
     "pack-crx": "crx pack dist -o ./extension.crx",
-    "start-chromium": "web-ext run --source-dir ./dist --target=chromium"
+    "pack-xpi": "web-ext build -s ./dist-firefox/ -o",
+    "start-firefox": "web-ext run -s ./dist-firefox",
+    "start-chromium": "web-ext run -s ./dist --target=chromium"
   },
   "devDependencies": {
     "@ffflorian/jszip-cli": "^3.1.6",
     "@liuli-util/markdown-util": "^0.5.0",
-    "@types/chrome": "^0.0.206",
+    "@liuli-util/vite-plugin-chrome-extension-dist-firefox": "workspace:*",
+    "@types/firefox-webext-browser": "^94.0.1",
     "@types/minimatch": "^5.1.2",
     "@types/node": "^18.11.17",
+    "@types/webextension-polyfill": "^0.9.2",
     "cross-env": "^7.0.3",
     "crx": "^5.0.1",
-    "joplin-api": "workspace:^0.5.1",
     "rimraf": "^3.0.2",
     "typescript": "^4.6.4",
     "vite": "^3.2.0",
     "vite-plugin-chrome-extension": "^0.0.7",
     "vitest": "^0.23.4",
-    "web-ext": "^7.4.0"
+    "web-ext": "^7.4.0",
+    "webextension-polyfill": "^0.10.0"
   },
   "dependencies": {
+    "joplin-api": "workspace:^",
     "minimatch": "^5.1.2"
   }
 }

apps/joplin-search-integration/src/background.ts

@@ -1,8 +1,10 @@
-chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+import browser from 'webextension-polyfill'
+
+browser.runtime.onMessage.addListener((message) => {
   switch (message.action) {
     case 'open':
-      const url = chrome.runtime.getURL(`/options/index.html?id=${message.id}`)
-      chrome.tabs.create({ url, active: true })
+      const url = browser.runtime.getURL(`/options/index.html?id=${message.id}`)
+      browser.tabs.create({ url, active: true })
       break
     default:
       break

apps/joplin-search-integration/src/content-scripts/utils/render.ts

@@ -1,3 +1,4 @@
+import browser from 'webextension-polyfill'
 import { SearchNote } from '../plugins/plugin'
 
 export function renderList(root: HTMLDivElement, list: SearchNote[]) {
@@ -13,7 +14,7 @@ export function renderList(root: HTMLDivElement, list: SearchNote[]) {
     if (!(el instanceof HTMLElement && el.tagName === 'A')) {
       return
     }
-    chrome.runtime.sendMessage({
+    browser.runtime.sendMessage({
       action: 'open',
       id: el.dataset.id,
     })

apps/joplin-search-integration/src/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Joplin Search Integration",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "When using search, related Joplin notes are also displayed in the search results.",
   "manifest_version": 3,
   "background": {

apps/joplin-search-integration/src/options/main.ts

@@ -1,3 +1,4 @@
+import 'webextension-polyfill'
 import { fromMarkdown, Link, Image, selectAll, toHtml } from '@liuli-util/markdown-util'
 import { config, noteApi } from 'joplin-api'
 import { loadConfig, LocalConfig } from './utils/loadConfig'
@@ -38,14 +39,14 @@ function renderNoteToHtml(note: NoteData): string {
     if (note.resources.includes(id)) {
       item.url = `${config.baseUrl}/resources/${id}/file?token=${config.token}`
     } else {
-      item.url = chrome.runtime.getURL(`/options/index.html?id=${id}`)
+      item.url = browser.runtime.getURL(`/options/index.html?id=${id}`)
     }
   })
   const html = toHtml(root)
   const parser = new DOMParser()
   const dom = parser.parseFromString(html, 'text/html')
   dom.querySelectorAll('a').forEach((item) => {
-    if (item.protocol !== 'chrome-extension:') {
+    if (!['chrome-extension:', 'moz-extension:'].includes(item.protocol)) {
       item.target = '_blank'
     }
   })
@@ -60,7 +61,7 @@ function onToggleTheme() {
   document.querySelector('#app .panel .icon.toggle')!.addEventListener('click', () => {
     const t = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'
     document.documentElement.dataset.theme = t
-    chrome.storage.local.set({ theme: t })
+    browser.storage.local.set({ theme: t })
   })
 }
 

apps/joplin-search-integration/src/options/utils/loadConfig.ts

@@ -1,11 +1,13 @@
+import browser from 'webextension-polyfill'
+
 export interface LocalConfig {
   baseUrl: string
   token?: string
   theme: 'light' | 'dark'
 }
 
 export async function loadConfig(): Promise<LocalConfig> {
-  const c = ((await chrome.storage.local.get(['baseUrl', 'token', 'theme'])) ?? {}) as LocalConfig
+  const c = ((await browser.storage.local.get(['baseUrl', 'token', 'theme'])) ?? {}) as LocalConfig
   return {
     baseUrl: c.baseUrl ?? 'http://127.0.0.1:41184',
     token: c.token,

apps/joplin-search-integration/src/popup/main.ts

@@ -1,3 +1,4 @@
+import browser from 'webextension-polyfill'
 import { loadConfig } from '../options/utils/loadConfig'
 
 window.addEventListener('load', async () => {
@@ -11,7 +12,7 @@ window.addEventListener('load', async () => {
   const list = ['baseUrl', 'token', 'theme']
   list.forEach((k) => {
     document.getElementById(k)!.addEventListener('change', async (ev) => {
-      await chrome.storage.local.set({ [k]: (ev.target as HTMLInputElement).value })
+      await browser.storage.local.set({ [k]: (ev.target as HTMLInputElement).value })
     })
   })
 })

apps/joplin-search-integration/src/utils/__tests__/convertManifest3To2.test.ts

@@ -0,0 +1,64 @@
+import { expect, it } from 'vitest'
+import { convertManifest3To2 } from '../convertManifest3To2'
+
+const v3 = {
+  name: 'Joplin Search Integration',
+  version: '0.2.1',
+  description: 'When using search, related Joplin notes are also displayed in the search results.',
+  manifest_version: 3,
+  background: {
+    service_worker: 'background.js',
+  },
+  content_scripts: [
+    {
+      matches: ['<all_urls>'],
+      js: ['content-scripts/main.js'],
+    },
+  ],
+  action: {
+    default_popup: 'popup/index.html',
+  },
+  host_permissions: ['http://localhost:27583/*', 'http://localhost:41184/*'],
+  permissions: ['storage'],
+  icons: {
+    '16': 'assets/icon-16.png',
+    '32': 'assets/icon-32.png',
+    '48': 'assets/icon-48.png',
+    '128': 'assets/icon-128.png',
+  },
+  options_page: 'options/index.html',
+}
+
+const v2 = {
+  name: 'Joplin Search Integration',
+  version: '0.2.1',
+  description: 'When using search, related Joplin notes are also displayed in the search results.',
+  manifest_version: 2,
+  background: {
+    scripts: ['background.js'],
+  },
+  content_scripts: [
+    {
+      matches: ['<all_urls>'],
+      js: ['content-scripts/main.js'],
+    },
+  ],
+  browser_action: {
+    default_popup: 'popup/index.html',
+  },
+  permissions: ['storage', 'http://localhost:27583/*', 'http://localhost:41184/*', '<all_urls>'],
+  icons: {
+    '16': 'assets/icon-16.png',
+    '32': 'assets/icon-32.png',
+    '48': 'assets/icon-48.png',
+    '128': 'assets/icon-128.png',
+  },
+  options_ui: {
+    page: 'options/index.html',
+    browser_style: true,
+  },
+}
+
+it('convertManifestChromeToFirefox', () => {
+  expect(convertManifest3To2(v3)).deep.eq(v2)
+})

apps/joplin-search-integration/src/utils/convertManifest3To2.ts

@@ -0,0 +1,18 @@
+import manifest3 from '../manifest.json'
+
+export function convertManifest3To2(manifest: typeof manifest3) {
+  const { background, action, manifest_version, host_permissions, permissions, options_page, ...other } = manifest
+  return {
+    ...other,
+    background: {
+      scripts: [background.service_worker],
+    },
+    browser_action: action,
+    manifest_version: 2,
+    permissions: [...permissions, ...(host_permissions ? [...host_permissions, '<all_urls>'] : [])],
+    options_ui: {
+      page: options_page,
+      browser_style: true,
+    },
+  }
+}

apps/joplin-search-integration/tsconfig.node.json

@@ -6,5 +6,5 @@
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts", "src/manifest.json"]
+  "include": ["vite.config.ts", "src/manifest.json", "src/utils/convertManifest3To2.ts"]
 }

apps/joplin-search-integration/vite.config.ts

@@ -1,6 +1,7 @@
-import { defineConfig } from 'vite'
+import { defineConfig, Plugin } from 'vite'
 import path from 'node:path'
 import { chromeExtension } from 'vite-plugin-chrome-extension'
+import { firefoxOutput } from '@liuli-util/vite-plugin-chrome-extension-dist-firefox'
 
 export default defineConfig({
   resolve: {
@@ -15,5 +16,5 @@ export default defineConfig({
     minify: false,
     assetsInlineLimit: 10096,
   },
-  plugins: [chromeExtension()] as any,
+  plugins: [chromeExtension() as any, firefoxOutput()],
 })

libs/vite-plugin-chrome-extension-dist-firefox/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@liuli-util/vite-plugin-chrome-extension-dist-firefox",
+  "version": "0.2.0",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts",
+    "setup": "pnpm build",
+    "dev": "pnpm build --watch",
+    "test": "vitest run"
+  },
+  "sideEffects": false,
+  "devDependencies": {
+    "@types/node": "^18.11.18",
+    "tsup": "^6.2.3",
+    "tsx": "^3.9.0",
+    "typescript": "^4.8.4",
+    "vite": "^4.0.3",
+    "vitest": "^0.23.4"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@liuli-util/fs-extra": "^0.1.0"
+  }
+}

libs/vite-plugin-chrome-extension-dist-firefox/src/index.ts

@@ -0,0 +1,21 @@
+import { copy, readJson, remove, writeJson } from '@liuli-util/fs-extra'
+import path from 'node:path'
+import { Plugin, ResolvedConfig } from 'vite'
+import { convertManifest3To2 } from './utils/convertManifest3To2'
+
+export function firefoxOutput(): Plugin {
+  let c: ResolvedConfig
+  return {
+    name: 'vite-plugin-firefox-dist',
+    configResolved(config) {
+      c = config
+    },
+    async closeBundle() {
+      const firefoxDist = path.resolve(c.root, './dist-firefox')
+      await remove(firefoxDist)
+      await copy(path.resolve(c.root, './dist'), firefoxDist)
+      const jsonPath = path.resolve(firefoxDist, 'manifest.json')
+      await writeJson(jsonPath, convertManifest3To2(await readJson(jsonPath)), { spaces: 2 })
+    },
+  }
+}

libs/vite-plugin-chrome-extension-dist-firefox/src/manifest.json

@@ -0,0 +1,27 @@
+{
+  "name": "Joplin Search Integration",
+  "version": "0.2.1",
+  "description": "When using search, related Joplin notes are also displayed in the search results.",
+  "manifest_version": 3,
+  "background": {
+    "service_worker": "background.ts"
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content-scripts/main.ts"]
+    }
+  ],
+  "action": {
+    "default_popup": "popup/index.html"
+  },
+  "host_permissions": ["http://localhost:27583/*", "http://localhost:41184/*"],
+  "permissions": ["storage"],
+  "icons": {
+    "16": "assets/icon-16.png",
+    "32": "assets/icon-32.png",
+    "48": "assets/icon-48.png",
+    "128": "assets/icon-128.png"
+  },
+  "options_page": "options/index.html"
+}

libs/vite-plugin-chrome-extension-dist-firefox/src/utils/__tests__/convertManifest3To2.test.ts

@@ -0,0 +1,64 @@
+import { expect, it } from 'vitest'
+import { convertManifest3To2 } from '../convertManifest3To2'
+
+const v3 = {
+  name: 'Joplin Search Integration',
+  version: '0.2.1',
+  description: 'When using search, related Joplin notes are also displayed in the search results.',
+  manifest_version: 3,
+  background: {
+    service_worker: 'background.js',
+  },
+  content_scripts: [
+    {
+      matches: ['<all_urls>'],
+      js: ['content-scripts/main.js'],
+    },
+  ],
+  action: {
+    default_popup: 'popup/index.html',
+  },
+  host_permissions: ['http://localhost:27583/*', 'http://localhost:41184/*'],
+  permissions: ['storage'],
+  icons: {
+    '16': 'assets/icon-16.png',
+    '32': 'assets/icon-32.png',
+    '48': 'assets/icon-48.png',
+    '128': 'assets/icon-128.png',
+  },
+  options_page: 'options/index.html',
+}
+
+const v2 = {
+  name: 'Joplin Search Integration',
+  version: '0.2.1',
+  description: 'When using search, related Joplin notes are also displayed in the search results.',
+  manifest_version: 2,
+  background: {
+    scripts: ['background.js'],
+  },
+  content_scripts: [
+    {
+      matches: ['<all_urls>'],
+      js: ['content-scripts/main.js'],
+    },
+  ],
+  browser_action: {
+    default_popup: 'popup/index.html',
+  },
+  permissions: ['storage', 'http://localhost:27583/*', 'http://localhost:41184/*', '<all_urls>'],
+  icons: {
+    '16': 'assets/icon-16.png',
+    '32': 'assets/icon-32.png',
+    '48': 'assets/icon-48.png',
+    '128': 'assets/icon-128.png',
+  },
+  options_ui: {
+    page: 'options/index.html',
+    browser_style: true,
+  },
+}
+
+it('convertManifestChromeToFirefox', () => {
+  expect(convertManifest3To2(v3)).deep.eq(v2)
+})