feat(remove-redirect): transform 支持 fallbackSelector 配置项

Author: maomao1996

.changeset/eleven-shirts-complain.md

@@ -0,0 +1,5 @@
+---
+'remove-redirect': minor
+---
+
+`transform` 支持 `fallbackSelector` 配置项

packages/remove-redirect/src/index.ts

@@ -8,7 +8,7 @@ import {
 } from '@femm/shared-utils'
 
 import * as sites from 'src/sites'
-import { getSearchParamsValue } from 'src/utils'
+import { getSearchParamsValue, requestOriginalLink } from 'src/utils'
 
 const hostname = formatHostname()
 const formatSites = Object.values(sites).flat()
@@ -46,6 +46,7 @@ function handleTransform<T extends AllHTMLElementTypes>({
   attribute,
   queryName,
   separator = '?target=',
+  fallbackSelector,
   customTransform = (node: T) => {
     let originUrl = ''
 
@@ -70,6 +71,10 @@ function handleTransform<T extends AllHTMLElementTypes>({
 }: Site.Transform<T>) {
   const observer = new MutationObserver(() => {
     document.querySelectorAll<T>(selector).forEach(customTransform)
+
+    if (fallbackSelector && document.querySelectorAll(fallbackSelector).length) {
+      document.querySelectorAll<HTMLAnchorElement>(fallbackSelector).forEach(requestOriginalLink)
+    }
   })
 
   document.body.setAttribute(FEMM_ATTR_KEY, 'remove-redirect')

packages/remove-redirect/src/utils/index.ts

@@ -1,4 +1,4 @@
-import { observeElementEnterViewport } from '@femm/shared-utils'
+import { observeElementEnterViewport } from '@femm/shared-utils/dom/'
 import { GMCachedRequest } from '@femm/shared-utils/gm/'
 
 export function defineSite<T extends AllHTMLElementTypes = HTMLAnchorElement>(
@@ -43,3 +43,13 @@ export function getSearchParamsValue(
 
   return result || ''
 }
+
+export function requestOriginalLink(element: HTMLAnchorElement) {
+  observeElementEnterViewport(element, () => {
+    GMCachedRequest({ url: element.href }).then((res) => {
+      if (res.finalUrl) {
+        element.href = res.finalUrl
+      }
+    })
+  })
+}

packages/remove-redirect/types/index.d.ts

@@ -17,6 +17,12 @@ declare namespace Site {
     /** 分隔符 */
     separator?: Separator
 
+    /**
+     * 需要进行兜底处理的链接元素的 CSS 选择器
+     * 用于处理 transform 规则无法处理的链接，通过 GM.xmlHttpRequest 请求获取原始链接，并替换为解析后的 URL
+     */
+    fallbackSelector?: `a${string}`
+
     /**
      * 自定义转换规则函数
      * 用于定义如何处理 DOM 元素的逻辑，如果定义了该规则，将覆盖默认行为

shared/utils/src/dom/index.ts

@@ -1,2 +1,3 @@
 export * from './attr'
 export * from './constant'
+export * from './intersection-observer'

shared/utils/src/dom/intersection-observer.ts

@@ -0,0 +1,22 @@
+import { FEMM_ATTR_KEY } from './constant'
+
+const map = new WeakMap()
+
+/** 监听元素进入可视区域 */
+export function observeElementEnterViewport(element: Element, callback: () => void) {
+  if (map.has(element) || element.getAttribute(FEMM_ATTR_KEY)) {
+    return
+  }
+  map.set(element, 1)
+  const ob = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        element.setAttribute(FEMM_ATTR_KEY, 'observered')
+        callback()
+        ob.unobserve(element)
+      }
+    }
+  })
+
+  ob.observe(element)
+}

shared/utils/src/gm/index.ts

@@ -0,0 +1,3 @@
+import { createCachedRequest } from '../request'
+
+export const GMCachedRequest = createCachedRequest(GM.xmlHttpRequest)

shared/utils/src/request/index.ts

@@ -0,0 +1,69 @@
+interface CachedRequestOptions {
+  /** 过期时间，如果为 0 则表示永不过期 */
+  cacheTime?: number
+  shouldCacheError?: boolean
+}
+interface CacheEntry<R> {
+  data?: R
+  time?: number
+  error?: any
+  requestPromise?: Promise<R>
+}
+
+type RequestFunctionWithCacheOptions<TContext = any> = (
+  details: Tampermonkey.Request<TContext> & CachedRequestOptions,
+) => Promise<Tampermonkey.Response<TContext>>
+
+export function createCachedRequest(requestFunction: RequestFunctionWithCacheOptions) {
+  const cache = new Map<string, CacheEntry<any>>()
+
+  return function cachedRequest<TContext extends any>(
+    options: Tampermonkey.Request<TContext> & CachedRequestOptions,
+  ): Promise<Tampermonkey.Response<TContext>> {
+    if (
+      options.cacheTime !== undefined &&
+      (typeof options.cacheTime !== 'number' || options.cacheTime < 0)
+    ) {
+      throw new Error('无效的 cacheTime 选项')
+    }
+
+    const cacheKey = JSON.stringify(options)
+    const cachedData = cache.get(cacheKey)
+
+    if (cachedData) {
+      const { data, time, error, requestPromise } = cachedData
+
+      if (requestPromise) {
+        return requestPromise
+      }
+
+      const cacheTime = options.cacheTime ?? 0
+
+      if (!error && time && cacheTime && Date.now() - time < cacheTime) {
+        return Promise.resolve(data as Tampermonkey.Response<TContext>)
+      } else {
+        cache.delete(cacheKey)
+      }
+    }
+
+    const shouldCacheError = options.shouldCacheError ?? false
+
+    const requestPromise = requestFunction(options)
+      .then((data) => {
+        const time = Date.now()
+        cache.set(cacheKey, { data, time })
+        return data
+      })
+      .catch((error) => {
+        if (shouldCacheError) {
+          const time = Date.now()
+          cache.set(cacheKey, { error, time })
+        }
+        throw error
+      })
+
+    cache.set(cacheKey, { requestPromise })
+
+    return requestPromise
+  }
+}