Skip to content

Commit

Permalink
fix: create new manifest for firefox and replace folder select with c…
Browse files Browse the repository at this point in the history
…ombobox in plugin
  • Loading branch information
banzhe committed Nov 18, 2024
1 parent e28c840 commit 7b92219
Show file tree
Hide file tree
Showing 9 changed files with 428 additions and 28 deletions.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
92 changes: 92 additions & 0 deletions packages/plugin/manifest.firefox.json
Original file line number Diff line number Diff line change
@@ -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": [
"<all_urls>"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"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": [
"<all_urls>"
],
"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": [
"<all_urls>"
],
"run_at": "document_start",
"js": [
"lib/browser-polyfill.min.js",
"lib/single-file-bootstrap.js"
],
"all_frames": false
},
{
"matches": [
"<all_urls>"
],
"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": [
"<all_urls>"
],
"resources": [
"lib/single-file-hooks-frames.js",
"lib/browser-polyfill.min.js",
"contentScripts/content.js",
"chunks/*"
]
}
]
}
1 change: 1 addition & 0 deletions packages/plugin/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
74 changes: 74 additions & 0 deletions packages/plugin/popup/components/FolderCombobox.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="justify-between w-full"
>
{value
? options.find(option => option.value === value)?.label
: 'Select a folder'}
{open ? <ChevronDown size={16} className="transform rotate-180 opacity-50" /> : <ChevronDown size={16} className="opacity-50" />}
</Button>
</PopoverTrigger>
<PopoverContent className="p-0 w-[14.5rem]">
<Command>
<CommandList className="h-48 scrollbar-hide">
<CommandEmpty>No Folder Found.</CommandEmpty>
<CommandGroup>
{options.map(option => (
<CommandItem
key={option.value}
value={option.value}
onSelect={(currentValue) => {
onValueChange?.(currentValue === value ? '' : currentValue)
setOpen(false)
}}
>
{option.label}
<Check
className={cn(
'ml-auto',
value === option.value ? 'opacity-100' : 'opacity-0',
)}
/>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
}

export default FolderCombobox
34 changes: 17 additions & 17 deletions packages/plugin/popup/components/UploadPageForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ 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'
import AutoCompleteTagInput from '@web-archive/shared/components/auto-complete-tag-input'
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'
Expand Down Expand Up @@ -261,22 +261,22 @@ function UploadPageForm({ setActivePage }: UploadPageFormProps) {
Folder
</Label>
<div className="flex space-x-2">
<Select
name="folderId"
value={uploadPageData.folderId}
onValueChange={handleFolderSelect}
>
<SelectTrigger>
<SelectValue placeholder="select folder"></SelectValue>
</SelectTrigger>
<SelectContent className="max-h-48">
{folderList && folderList.map(folder => (
<SelectItem key={folder.id} value={folder.id.toString()}>
{folder.name}
</SelectItem>
))}
</SelectContent>
</Select>
<div className="flex-1">
{/*
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.
*/}
<FolderCombobox
value={uploadPageData.folderId}
onValueChange={handleFolderSelect}
options={(folderList ?? []).map(folder => ({
value: folder.id.toString(),
label: folder.name,
}))}
>
</FolderCombobox>
</div>
<Button
variant="secondary"
className="w-12 h-10"
Expand Down
7 changes: 5 additions & 2 deletions packages/plugin/vite.production.config.ts
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
import { resolve } from 'node:path'
import process from 'node:process'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteStaticCopy } from 'vite-plugin-static-copy'

const isFirefox = process.argv.includes('--firefox')

export default defineConfig({
plugins: [
react(),
viteStaticCopy({
targets: [
{ src: 'manifest.json', dest: '.' },
{ src: isFirefox ? 'manifest.firefox.json' : 'manifest.json', dest: '.', rename: 'manifest.json' },
{ src: 'lib', dest: '.' },
{ src: 'assets', dest: '.' },
],
}),
],
build: {
outDir: '../../dist/extension',
outDir: isFirefox ? '../../dist/extension-firefox' : '../../dist/extension',
rollupOptions: {
input: {
popup: resolve(__dirname, 'popup/index.html'),
Expand Down
Loading

0 comments on commit 7b92219

Please sign in to comment.