perf: 在 ehentai 上为识别出的广告页增加马赛克标识方便确认

hymbz · Jan 18, 2024 · 6c73f76 · 6c73f76
1 parent c423c0a
commit 6c73f76
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/src/helper/index.ts b/src/helper/index.ts
@@ -468,3 +468,12 @@ export const keyboardCodeToText = (code: string) =>
     .replace('ArrowLeft', '←')
     .replace('ArrowRight', '→')
     .replace(/^\s$/, 'Space');
+
+/** 创建一个可以不断更新的 style 元素 */
+export const createStyle = () => {
+  let style: HTMLStyleElement;
+  return async (css: string) => {
+    if (style) style.textContent = css;
+    else style = await GM.addStyle(css);
+  };
+};
diff --git a/src/site/copymanga.tsx b/src/site/copymanga.tsx
@@ -1,5 +1,11 @@
 import type { InitOptions, RequestDetails } from 'main';
-import { eachApi, querySelectorClick, wait, querySelector } from 'main';
+import {
+  eachApi,
+  querySelectorClick,
+  wait,
+  querySelector,
+  createStyle,
+} from 'main';
 
 const apiList = [
   'https://api.copymanga.info',
@@ -64,7 +70,8 @@ const api = (url: string, details?: RequestDetails) =>
     if (!comicName || !token) return;
 
     let a: HTMLAnchorElement;
-    let style: HTMLStyleElement;
+
+    const setStyle = createStyle();
 
     const updateLastChapter = async () => {
       // 因为拷贝漫画的目录是动态加载的，所以要等目录加载出来再往上添加
@@ -98,12 +105,10 @@ const api = (url: string, details?: RequestDetails) =>
         return;
       }
 
-      const css = `ul a[href*="${lastChapterId}"] {
+      setStyle(`ul a[href*="${lastChapterId}"] {
         color: #fff !important;
         background: #1790E6;
-      }`;
-      if (style) style.textContent = css;
-      else style = await GM.addStyle(css);
+      }`);
 
       a.href = `${window.location.pathname}/chapter/${lastChapterId}`;
       a.textContent = data?.results?.browse?.chapter_name as string;

diff --git a/src/site/ehentai.tsx b/src/site/ehentai.tsx
@@ -16,6 +16,7 @@ import {
   store,
   requestIdleCallback,
   getAdPage,
+  createStyle,
 } from 'main';
 
 declare const selected_tagname: string;
@@ -146,6 +147,7 @@ declare const selected_tagname: string;
   const ehImgPageList: string[] = [];
   const ehImgFileNameList: string[] = [];
 
+  const setStyle = createStyle();
   const removeAdPage = () => {
     const adPageList = getAdPage(ehImgFileNameList);
     if (!adPageList.size) return;
@@ -155,6 +157,16 @@ declare const selected_tagname: string;
     );
     ehImgList.length -= adPageList.size;
     setManga('imgList', ehImgList);
+    setStyle(
+      [...adPageList]
+        .map(
+          (i) =>
+            `img[alt="${
+              i + 1
+            }"]:not(:hover) { filter: blur(8px); clip-path: border-box; }`,
+        )
+        .join('\n'),
+    );
   };
 
   const { loadImgList } = init(