From 7b9221971a7371e95ab1c2a2a50d94de51081e25 Mon Sep 17 00:00:00 2001 From: banzhe Date: Mon, 18 Nov 2024 13:19:09 +0800 Subject: [PATCH] fix: create new manifest for firefox and replace folder select with combobox in plugin --- package.json | 3 + packages/plugin/manifest.firefox.json | 92 +++++++++++ packages/plugin/package.json | 1 + .../popup/components/FolderCombobox.tsx | 74 +++++++++ .../popup/components/UploadPageForm.tsx | 34 ++-- packages/plugin/vite.production.config.ts | 7 +- packages/shared/components/command.tsx | 153 ++++++++++++++++++ packages/shared/components/popover.tsx | 31 ++++ pnpm-lock.yaml | 61 +++++-- 9 files changed, 428 insertions(+), 28 deletions(-) create mode 100644 packages/plugin/manifest.firefox.json create mode 100644 packages/plugin/popup/components/FolderCombobox.tsx create mode 100644 packages/shared/components/command.tsx create mode 100644 packages/shared/components/popover.tsx diff --git a/package.json b/package.json index f008d16..f9be269 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "dev:plugin": "pnpm --filter=plugin dev", "build:service": "pnpm --filter=server build && pnpm --filter=web build && node scripts/build_clear.mjs", "build:plugin": "pnpm --filter=plugin build", + "build:plugin-firefox": "pnpm --filter=plugin build:firefox", "lint": "eslint .", "lint:fix": "eslint . --fix", "prepare": "husky", @@ -37,6 +38,7 @@ "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-label": "^2.1.0", + "@radix-ui/react-popover": "^1.1.2", "@radix-ui/react-scroll-area": "^1.2.0", "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-separator": "^1.1.0", @@ -46,6 +48,7 @@ "ahooks": "^3.8.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "cmdk": "^1.0.4", "emblor": "^1.4.6", "lucide-react": "^0.446.0", "mitt": "^3.0.1", diff --git a/packages/plugin/manifest.firefox.json b/packages/plugin/manifest.firefox.json new file mode 100644 index 0000000..c464a78 --- /dev/null +++ b/packages/plugin/manifest.firefox.json @@ -0,0 +1,92 @@ +{ + "name": "web-archive", + "author": "Ray-D-Song", + "icons": { + "16": "assets/icon.png", + "48": "assets/icon.png", + "64": "assets/icon.png", + "128": "assets/icon.png" + }, + "description": "SingleFile with categories and exhibition pages", + "version": "0.1.1", + "manifest_version": 3, + "action": { + "default_icon": "assets/icon.png", + "default_popup": "popup/index.html" + }, + "host_permissions": [ + "" + ], + "content_scripts": [ + { + "matches": [ + "" + ], + "run_at": "document_start", + "js": [ + "lib/browser-polyfill.min.js", + "lib/single-file-frames.js", + "lib/single-file-extension-frames.js" + ], + "all_frames": true, + "match_about_blank": true, + "match_origin_as_fallback": true + }, + { + "matches": [ + "" + ], + "run_at": "document_start", + "js": [ + "lib/single-file-hooks-frames.js" + ], + "all_frames": true, + "match_about_blank": true, + "match_origin_as_fallback": true, + "world": "MAIN" + }, + { + "matches": [ + "" + ], + "run_at": "document_start", + "js": [ + "lib/browser-polyfill.min.js", + "lib/single-file-bootstrap.js" + ], + "all_frames": false + }, + { + "matches": [ + "" + ], + "js": [ + "lib/browser-polyfill.min.js", + "contentScripts/main.js" + ] + } + ], + "background": { + "scripts": ["background/background.js"], + "type": "module" + }, + "permissions": [ + "activeTab", + "storage", + "tabs", + "scripting" + ], + "web_accessible_resources": [ + { + "matches": [ + "" + ], + "resources": [ + "lib/single-file-hooks-frames.js", + "lib/browser-polyfill.min.js", + "contentScripts/content.js", + "chunks/*" + ] + } + ] +} diff --git a/packages/plugin/package.json b/packages/plugin/package.json index 0f484f6..ffca9ec 100644 --- a/packages/plugin/package.json +++ b/packages/plugin/package.json @@ -11,6 +11,7 @@ "scripts": { "dev": "vite", "build": "vite build --config vite.production.config.ts", + "build:firefox": "vite build --config vite.production.config.ts -- --firefox", "test": "echo \"Error: no test specified\" && exit 1" }, "dependencies": { diff --git a/packages/plugin/popup/components/FolderCombobox.tsx b/packages/plugin/popup/components/FolderCombobox.tsx new file mode 100644 index 0000000..77a6018 --- /dev/null +++ b/packages/plugin/popup/components/FolderCombobox.tsx @@ -0,0 +1,74 @@ +import * as React from 'react' +import { Check, ChevronDown } from 'lucide-react' + +import { cn } from '@web-archive/shared/utils' +import { Button } from '@web-archive/shared/components/button' +import { + Command, + CommandEmpty, + CommandGroup, + CommandItem, + CommandList, +} from '@web-archive/shared/components/command' +import { + Popover, + PopoverContent, + PopoverTrigger, +} from '@web-archive/shared/components/popover' + +interface ComboboxProps { + value?: string + onValueChange?: (value: string) => void + options: { value: string, label: string }[] +} + +function FolderCombobox({ value, onValueChange, options }: ComboboxProps) { + const [open, setOpen] = React.useState(false) + + return ( + + + + + + + + No Folder Found. + + {options.map(option => ( + { + onValueChange?.(currentValue === value ? '' : currentValue) + setOpen(false) + }} + > + {option.label} + + + ))} + + + + + + ) +} + +export default FolderCombobox diff --git a/packages/plugin/popup/components/UploadPageForm.tsx b/packages/plugin/popup/components/UploadPageForm.tsx index 768dc62..4e79eb7 100644 --- a/packages/plugin/popup/components/UploadPageForm.tsx +++ b/packages/plugin/popup/components/UploadPageForm.tsx @@ -6,7 +6,6 @@ import { useState } from 'react' import { sendMessage } from 'webext-bridge/popup' import { Textarea } from '@web-archive/shared/components/textarea' import { Button } from '@web-archive/shared/components/button' -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@web-archive/shared/components/select' import { useRequest } from 'ahooks' import { isNil, isNotNil } from '@web-archive/shared/utils' import toast from 'react-hot-toast' @@ -14,6 +13,7 @@ import AutoCompleteTagInput from '@web-archive/shared/components/auto-complete-t import { PlusIcon } from 'lucide-react' import { Switch } from '@web-archive/shared/components/switch' import NewFolderDialog from './NewFolderDialog' +import FolderCombobox from './FolderCombobox' import { getSingleFileSetting } from '~/popup/utils/singleFile' import { takeScreenshot } from '~/popup/utils/screenshot' import { getCurrentTab } from '~/popup/utils/tab' @@ -261,22 +261,22 @@ function UploadPageForm({ setActivePage }: UploadPageFormProps) { Folder
- +
+ {/* + use combobox instead of select due to Select(v2.1.2) will auto close when resize event is fired + and popup in firefox will fire resize event after DOM mutations + https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups#:~:text=In%20Firefox%2C%20the%20size%20is%20calculated%20just%20before%20the%20popup%20is%20shown%2C%20and%20at%20most%2010%20times%20per%20second%20after%20DOM%20mutations. + */} + ({ + value: folder.id.toString(), + label: folder.name, + }))} + > + +