mirror of
https://github.com/JefferyHcool/BiliNote.git
synced 2026-06-18 06:00:15 +08:00
feat(extension): 浏览器插件 P1 MVP
新建 BillNote_extension/ 工作空间(基于 vitesse-webext 骨架,Vue 3 + Vite + UnoCSS + MV3)。 P1 MVP 范围: - popup:自动读当前 tab URL,识别 Bilibili / YouTube / 抖音 / 快手;提交 /generate_note 后轮询 /task_status;展示 markdown,复制 + 下载 .md - options:后端地址输入与连通性测试;从 /get_all_providers + /get_models_by_provider 拉供应商/模型列表;默认画质、截图/跳转、笔记风格 - chrome.storage.local 持久化设置与最近 30 个任务,popup 重开恢复进行中任务 - markdown 里的 /static/screenshots 路径在渲染前重写为绝对地址 后端:CORS 改用 regex,新增允许 chrome-extension:// 与 moz-extension:// 源(同时保留 localhost / 127.0.0.1 / tauri.localhost)。无新增 backend endpoint。 P2-P4(content script 悬浮按钮、cookie 直通、side panel、思维导图、RAG 问答)保留 stub 文件,不在本次范围。 去掉 vitesse-webext 自带的 simple-git-hooks postinstall 配置——它会在仓库根装 pre-commit 钩子去跑 pnpm lint-staged,但仓库根没有 package.json,会破坏所有提交流。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
166
BillNote_extension/src/composables/useWebExtensionStorage.ts
Normal file
166
BillNote_extension/src/composables/useWebExtensionStorage.ts
Normal file
@@ -0,0 +1,166 @@
|
||||
import { StorageSerializers } from '@vueuse/core'
|
||||
import { pausableWatch, toValue, tryOnScopeDispose } from '@vueuse/shared'
|
||||
import { ref, shallowRef } from 'vue-demi'
|
||||
import { storage } from 'webextension-polyfill'
|
||||
|
||||
import type {
|
||||
StorageLikeAsync,
|
||||
UseStorageAsyncOptions,
|
||||
} from '@vueuse/core'
|
||||
import type { MaybeRefOrGetter, RemovableRef } from '@vueuse/shared'
|
||||
import type { Ref } from 'vue-demi'
|
||||
import type { Storage } from 'webextension-polyfill'
|
||||
|
||||
export type WebExtensionStorageOptions<T> = UseStorageAsyncOptions<T>
|
||||
|
||||
// https://github.com/vueuse/vueuse/blob/658444bf9f8b96118dbd06eba411bb6639e24e88/packages/core/useStorage/guess.ts
|
||||
export function guessSerializerType(rawInit: unknown) {
|
||||
return rawInit == null
|
||||
? 'any'
|
||||
: rawInit instanceof Set
|
||||
? 'set'
|
||||
: rawInit instanceof Map
|
||||
? 'map'
|
||||
: rawInit instanceof Date
|
||||
? 'date'
|
||||
: typeof rawInit === 'boolean'
|
||||
? 'boolean'
|
||||
: typeof rawInit === 'string'
|
||||
? 'string'
|
||||
: typeof rawInit === 'object'
|
||||
? 'object'
|
||||
: Number.isNaN(rawInit)
|
||||
? 'any'
|
||||
: 'number'
|
||||
}
|
||||
|
||||
const storageInterface: StorageLikeAsync = {
|
||||
removeItem(key: string) {
|
||||
return storage.local.remove(key)
|
||||
},
|
||||
|
||||
setItem(key: string, value: string) {
|
||||
return storage.local.set({ [key]: value })
|
||||
},
|
||||
|
||||
async getItem(key: string) {
|
||||
const storedData = await storage.local.get(key)
|
||||
|
||||
return storedData[key] as string
|
||||
},
|
||||
}
|
||||
|
||||
/**
|
||||
* https://github.com/vueuse/vueuse/blob/658444bf9f8b96118dbd06eba411bb6639e24e88/packages/core/useStorageAsync/index.ts
|
||||
*
|
||||
* @param key
|
||||
* @param initialValue
|
||||
* @param options
|
||||
*/
|
||||
export function useWebExtensionStorage<T>(
|
||||
key: string,
|
||||
initialValue: MaybeRefOrGetter<T>,
|
||||
options: WebExtensionStorageOptions<T> = {},
|
||||
): { data: RemovableRef<T>, dataReady: Promise<T> } {
|
||||
const {
|
||||
flush = 'pre',
|
||||
deep = true,
|
||||
listenToStorageChanges = true,
|
||||
writeDefaults = true,
|
||||
mergeDefaults = false,
|
||||
shallow,
|
||||
eventFilter,
|
||||
onError = (e) => {
|
||||
console.error(e)
|
||||
},
|
||||
} = options
|
||||
|
||||
const rawInit: T = toValue(initialValue)
|
||||
const type = guessSerializerType(rawInit)
|
||||
|
||||
const data = (shallow ? shallowRef : ref)(initialValue) as Ref<T>
|
||||
const serializer = options.serializer ?? StorageSerializers[type]
|
||||
|
||||
async function read(event?: { key: string, newValue: string | null }) {
|
||||
if (event && event.key !== key)
|
||||
return
|
||||
|
||||
try {
|
||||
const rawValue = event ? event.newValue : await storageInterface.getItem(key)
|
||||
if (rawValue == null) {
|
||||
data.value = rawInit
|
||||
if (writeDefaults && rawInit !== null)
|
||||
await storageInterface.setItem(key, await serializer.write(rawInit))
|
||||
}
|
||||
else if (mergeDefaults) {
|
||||
const value = await serializer.read(rawValue) as T
|
||||
if (typeof mergeDefaults === 'function')
|
||||
data.value = mergeDefaults(value, rawInit)
|
||||
else if (type === 'object' && !Array.isArray(value))
|
||||
data.value = { ...(rawInit as Record<keyof unknown, unknown>), ...(value as Record<keyof unknown, unknown>) } as T
|
||||
else data.value = value
|
||||
}
|
||||
else {
|
||||
data.value = await serializer.read(rawValue) as T
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
onError(error)
|
||||
}
|
||||
}
|
||||
|
||||
const dataReadyPromise = new Promise<T>((resolve, reject) => {
|
||||
read().then(() => resolve(data.value)).catch(reject)
|
||||
})
|
||||
|
||||
async function write() {
|
||||
try {
|
||||
await (
|
||||
data.value == null
|
||||
? storageInterface.removeItem(key)
|
||||
: storageInterface.setItem(key, await serializer.write(data.value))
|
||||
)
|
||||
}
|
||||
catch (error) {
|
||||
onError(error)
|
||||
}
|
||||
}
|
||||
|
||||
const { pause: pauseWatch, resume: resumeWatch } = pausableWatch(
|
||||
data,
|
||||
write,
|
||||
{
|
||||
flush,
|
||||
deep,
|
||||
eventFilter,
|
||||
},
|
||||
)
|
||||
|
||||
if (listenToStorageChanges) {
|
||||
const listener = async (changes: Record<string, Storage.StorageChange>) => {
|
||||
try {
|
||||
pauseWatch()
|
||||
for (const [key, change] of Object.entries(changes)) {
|
||||
await read({
|
||||
key,
|
||||
newValue: change.newValue as string | null,
|
||||
})
|
||||
}
|
||||
}
|
||||
finally {
|
||||
resumeWatch()
|
||||
}
|
||||
}
|
||||
|
||||
storage.onChanged.addListener(listener)
|
||||
|
||||
tryOnScopeDispose(() => {
|
||||
storage.onChanged.removeListener(listener)
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
data: data as RemovableRef<T>,
|
||||
dataReady: dataReadyPromise,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user