diff --git a/.stylelintrc.js b/.stylelintrc.js
index 8d00b694..ae96662b 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -16,8 +16,11 @@ module.exports = {
 
     // 允许 css 变量使用任意命名方式
     'custom-property-pattern': null,
-    // 允许任意类型的类名命名方式
+    // 允许任意类型的命名方式
     'selector-class-pattern': null,
+    'keyframes-name-pattern': null,
+    // 允许重复的 css 动画帧
+    'keyframe-block-no-duplicate-selectors': null,
 
     // 防止使用低性能的动画和过度属性
     'plugin/no-low-performance-animation-properties': true,
diff --git a/docs/Dev.md b/docs/Dev.md
index 2fece392..4a3337ba 100644
--- a/docs/Dev.md
+++ b/docs/Dev.md
@@ -2,6 +2,7 @@
 
 - 测试平板上的使用
 - 300 自动签到功能在首次签到成功时报错
+- dmzj 隐藏漫画增加上下话切换
 
 卷轴模式下图片的宽度应该要能简单调整，加设置项太麻烦，应该直接使用缩放功能来实现。目前已经可以在保持缩放的状态下滚动了，但现在使用的缩放库有几个问题
 1. 没办法在缩小后保持图片居中
diff --git a/index.html b/index.html
index ed162e93..5b505be9 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
     <style type="text/css">
       html {
         background-color: black;
+        color: white;
       }
       #root {
         height: 100vh;
diff --git a/package.json b/package.json
index 81588d64..8410ea82 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
     "panzoom": "^9.4.3",
     "solid-element": "^1.7.0",
     "solid-js": "^1.7.3",
-    "solid-toast": "^0.5.0",
     "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d7b3419..bcbd6dfc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,9 +19,6 @@ importers:
       solid-js:
         specifier: ^1.7.3
         version: 1.7.3
-      solid-toast:
-        specifier: ^0.5.0
-        version: 0.5.0(solid-js@1.7.3)
       throttle-debounce:
         specifier: ^5.0.0
         version: 5.0.0
diff --git a/rollup.config.ts b/rollup.config.ts
index de808909..fc73b954 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -71,19 +71,20 @@ export const meta = {
     'idmzj.com',
     'exhentai.org',
     'e-hentai.org',
+    'hath.network',
     'nhentai.net',
+    'hypergryph.com',
     'mangabz.com',
     'copymanga.site',
-    'copymanga.info',
-    'copymanga.net',
-    'copymanga.org',
-    'copymanga.com',
+    'self',
     '*',
   ],
   grant: [
     'GM_addElement',
     'GM_getResourceText',
     'GM_xmlhttpRequest',
+    'GM.addValueChangeListener',
+    'GM.removeValueChangeListener',
     'GM.getResourceText',
     'GM.addStyle',
     'GM.getValue',
@@ -122,7 +123,7 @@ const metaHeader = (() => {
       }
     })
     .join('\n');
-  return ['// ==UserScript==', metaStr, '// ==/UserScript=='].join('\n');
+  return `// ==UserScript==\n${metaStr}\n// ==/UserScript==\n\n`;
 })();
 
 export const buildOptions = (
@@ -174,8 +175,6 @@ export const buildOptions = (
       strict: false,
       generatedCode: 'es2015',
       extend: true,
-      // 为脚本加上油猴的注释
-      intro: isUserScript ? metaHeader : undefined,
       plugins: [
         {
           name: 'selfPlugin',
@@ -225,6 +224,9 @@ export const buildOptions = (
                 break;
             }
 
+            // 为脚本加上油猴的注释
+            if (isUserScript) newCode = metaHeader + newCode;
+
             return newCode;
           },
         },
diff --git a/src/components/Manga/components/ComicImg.module.css b/src/components/Manga/components/ComicImg.module.css
index 97efb4b1..34f5080b 100644
--- a/src/components/Manga/components/ComicImg.module.css
+++ b/src/components/Manga/components/ComicImg.module.css
@@ -30,6 +30,7 @@
   /* 隐藏滚动条但不影响滚动 */
   scrollbar-width: none;
   height: 100%;
+  outline: none;
 
   /* 隐藏滚动条但不影响滚动 */
   &::-webkit-scrollbar {
diff --git a/src/components/Toast/ToastItem.tsx b/src/components/Toast/ToastItem.tsx
new file mode 100644
index 00000000..ac957a91
--- /dev/null
+++ b/src/components/Toast/ToastItem.tsx
@@ -0,0 +1,91 @@
+import MdCheckCircle from '@material-design-icons/svg/round/check_circle.svg';
+import MdWarning from '@material-design-icons/svg/round/warning.svg';
+import MdError from '@material-design-icons/svg/round/error.svg';
+import MdInfo from '@material-design-icons/svg/round/info.svg';
+
+import type { Component } from 'solid-js';
+import { createEffect, Show } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import { setState } from './helper';
+
+import type { Toast } from '.';
+import { toast } from './toast';
+
+import classes from './index.module.css';
+
+const iconMap = {
+  info: MdInfo,
+  success: MdCheckCircle,
+  warn: MdWarning,
+  error: MdError,
+};
+
+const colorMap = {
+  info: '#3a97d7',
+  success: '#23bb35',
+  warn: '#f0c53e',
+  error: '#e45042',
+  custom: '#1f2936',
+};
+
+/** 删除 toast */
+const dismissToast = (id: string) =>
+  setState((state) => {
+    state.map[id].onDismiss?.({ ...state.map[id] });
+    const i = state.list.findIndex((t) => t === id);
+    if (i !== -1) state.list.splice(i, 1);
+    Reflect.deleteProperty(state.map, id);
+  });
+
+/** 重置 toast 的 update 属性 */
+const resetToastUpdate = (id: string) =>
+  setState((state) => {
+    Reflect.deleteProperty(state.map[id], 'update');
+  });
+
+export const ToastItem: Component<Toast> = (props) => {
+  const dismiss = (e: Event) => {
+    e.stopPropagation();
+    toast.dismiss(props.id);
+  };
+
+  // 在退出动画结束后才真的删除
+  const handleAnimationEnd = () => {
+    if (!props.exit) return;
+    dismissToast(props.id);
+  };
+
+  let scheduleRef: HTMLDivElement;
+  createEffect(() => {
+    if (!props.update) return;
+
+    resetToastUpdate(props.id);
+    scheduleRef.getAnimations().forEach((animation) => {
+      animation.cancel();
+      animation.play();
+    });
+  });
+
+  return (
+    <div
+      class={classes.item}
+      style={{ '--theme': colorMap[props.type] }}
+      data-exit={props.exit}
+      onClick={dismiss}
+      onAnimationEnd={handleAnimationEnd}
+    >
+      <Dynamic component={iconMap[props.type]} />
+      <div class={classes.msg}>
+        {typeof props.msg === 'string' ? props.msg : <props.msg />}
+      </div>
+      <Show when={props.duration !== Infinity}>
+        <div
+          ref={scheduleRef!}
+          class={classes.schedule}
+          style={{ 'animation-duration': `${props.duration}ms` }}
+          onAnimationEnd={dismiss}
+        />
+      </Show>
+    </div>
+  );
+};
diff --git a/src/components/Toast/Toaster.tsx b/src/components/Toast/Toaster.tsx
new file mode 100644
index 00000000..27108fac
--- /dev/null
+++ b/src/components/Toast/Toaster.tsx
@@ -0,0 +1,29 @@
+import type { Component } from 'solid-js';
+import { For, createSignal, onCleanup, onMount } from 'solid-js';
+import { store } from './helper';
+import { ToastItem } from './ToastItem';
+
+import classes from './index.module.css';
+
+export const Toaster: Component = () => {
+  const [visible, setVisible] = createSignal(
+    document.visibilityState === 'visible',
+  );
+
+  onMount(() => {
+    const handleVisibilityChange = () => {
+      console.log(document.visibilityState);
+      setVisible(document.visibilityState === 'visible');
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    onCleanup(() =>
+      document.removeEventListener('visibilitychange', handleVisibilityChange),
+    );
+  });
+
+  return (
+    <div class={classes.root} data-paused={visible() ? undefined : ''}>
+      <For each={store.list}>{(id) => <ToastItem {...store.map[id]} />}</For>
+    </div>
+  );
+};
diff --git a/src/components/Toast/display.tsx b/src/components/Toast/display.tsx
new file mode 100644
index 00000000..20939e57
--- /dev/null
+++ b/src/components/Toast/display.tsx
@@ -0,0 +1,50 @@
+/*
+ * 用于测试时显示组件
+ */
+
+import { toast } from '.';
+import { Toaster } from './Toaster';
+
+export default function Display() {
+  const duration = 1000 * 3;
+
+  return (
+    <div style={{ height: '100vh' }}>
+      <button onClick={() => toast('加载图片中，请稍候', { duration })}>
+        文字
+      </button>
+
+      <button
+        onClick={() => toast(() => <div>加载图片中，请稍候</div>, { duration })}
+      >
+        JSX
+      </button>
+
+      <button onClick={() => toast.success('加载图片中，请稍候', { duration })}>
+        success
+      </button>
+      <button onClick={() => toast.warn('加载图片中，请稍候', { duration })}>
+        warn
+      </button>
+      <button onClick={() => toast.error('加载图片中，请稍候', { duration })}>
+        error
+      </button>
+
+      <button
+        onClick={() =>
+          toast.error('加载图片中，请稍候', { duration: Infinity })
+        }
+      >
+        永久显示
+      </button>
+
+      <button
+        onClick={() => toast.error('加载图片中，请稍候', { duration, id: '1' })}
+      >
+        更新
+      </button>
+
+      <Toaster />
+    </div>
+  );
+}
diff --git a/src/components/Toast/helper.tsx b/src/components/Toast/helper.tsx
new file mode 100644
index 00000000..3265ed6e
--- /dev/null
+++ b/src/components/Toast/helper.tsx
@@ -0,0 +1,21 @@
+import { createStore, produce } from 'solid-js/store';
+import type { Toast } from '.';
+
+const [_state, _setState] = createStore({
+  list: [] as Toast['id'][],
+  map: {} as Record<Toast['id'], Toast>,
+});
+export type State = typeof _state;
+
+export const setState = (fn: (state: State) => void) => _setState(produce(fn));
+
+// eslint-disable-next-line solid/reactivity
+export const store: Readonly<State> = _state;
+
+export const creatId = (): string => {
+  let id = `${Date.now()}`;
+  while (Reflect.has(store.map, id)) {
+    id += '_';
+  }
+  return id;
+};
diff --git a/src/components/Toast/index.module.css b/src/components/Toast/index.module.css
new file mode 100644
index 00000000..9485c8b4
--- /dev/null
+++ b/src/components/Toast/index.module.css
@@ -0,0 +1,126 @@
+.root {
+  pointer-events: none;
+
+  position: fixed;
+  z-index: 9999999999;
+  right: 0;
+  bottom: 0;
+
+  font-size: 16px;
+}
+
+.item {
+  pointer-events: auto;
+  cursor: pointer;
+
+  position: relative;
+
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+
+  max-width: 30vw;
+  margin: 1em;
+  padding: 0.8em 1em;
+
+  color: #000;
+
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 10px 0 #0000001a, 0 2px 15px 0 #0000000d;
+
+  animation: bounceInRight 0.5s 1;
+
+  & > svg {
+    margin-right: 0.5em;
+    color: var(--theme);
+  }
+
+  &[data-exit] {
+    animation: bounceOutRight 0.5s 1;
+  }
+}
+
+.schedule {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transform-origin: left;
+
+  width: 100%;
+  height: 0.2em;
+
+  background-color: var(--theme);
+
+  animation: schedule linear 1 forwards;
+}
+
+:is(.item:hover, .root[data-paused]) .schedule {
+  animation-play-state: paused;
+}
+
+.msg {
+  & h2,
+  & h3 {
+    margin: 0;
+    margin-bottom: 0.7em;
+  }
+
+  & ul {
+    margin: 0;
+  }
+}
+
+@keyframes schedule {
+  0% {
+    transform: scaleX(1);
+  }
+
+  100% {
+    transform: scaleX(0);
+  }
+}
+
+@keyframes bounceInRight {
+  0%,
+  60%,
+  75%,
+  90%,
+  100% {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    transform: translate3d(3000px, 0, 0) scaleX(3);
+    opacity: 0;
+  }
+
+  60% {
+    transform: translate3d(-25px, 0, 0) scaleX(1);
+    opacity: 1;
+  }
+
+  75% {
+    transform: translate3d(10px, 0, 0) scaleX(0.98);
+  }
+
+  90% {
+    transform: translate3d(-5px, 0, 0) scaleX(0.995);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes bounceOutRight {
+  20% {
+    transform: translate3d(-20px, 0, 0) scaleX(0.9);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate3d(2000px, 0, 0) scaleX(2);
+    opacity: 0;
+  }
+}
diff --git a/src/components/Toast/index.ts b/src/components/Toast/index.ts
new file mode 100644
index 00000000..2a030fb4
--- /dev/null
+++ b/src/components/Toast/index.ts
@@ -0,0 +1,22 @@
+import type { Component } from 'solid-js';
+
+import { css as style } from './index.module.css';
+
+export const ToastStyle = style;
+
+export { Toaster } from './Toaster';
+export { toast } from './toast';
+
+export interface Toast {
+  id: string;
+  duration: number;
+  type: 'info' | 'success' | 'warn' | 'error' | 'custom';
+  msg: Message;
+  onDismiss?: (t: Toast) => void;
+  exit?: true;
+  update?: true;
+}
+
+export type Options = Omit<Toast, 'msg' | 'exit' | 'update'>;
+
+export type Message = string | Component;
diff --git a/src/components/Toast/toast.tsx b/src/components/Toast/toast.tsx
new file mode 100644
index 00000000..c5cc2e47
--- /dev/null
+++ b/src/components/Toast/toast.tsx
@@ -0,0 +1,40 @@
+import type { Message, Toast } from '.';
+import { creatId, setState, store } from './helper';
+
+export const toast = (msg: Message, options?: Partial<Toast>) => {
+  if (!msg) return;
+
+  const newToast: Toast = {
+    id: (typeof msg === 'string' ? msg : options?.id) ?? creatId(),
+    type: typeof msg === 'string' ? 'info' : 'custom',
+    duration: 3000,
+    msg,
+    ...options,
+  };
+  const { id } = newToast;
+
+  setState((state) => {
+    if (Reflect.has(state.map, id)) {
+      Object.assign(state.map[id], newToast, { update: true });
+      return;
+    }
+
+    state.list.push(newToast.id);
+    state.map[id] = newToast;
+  });
+};
+
+toast.dismiss = (id: string) => {
+  if (!Reflect.has(store.map, id)) return;
+
+  setState((state) => {
+    state.map[id].exit = true;
+  });
+};
+
+toast.success = (msg: string, options?: Partial<Toast>) =>
+  toast(msg, { ...options, type: 'success' });
+toast.warn = (msg: string, options?: Partial<Toast>) =>
+  toast(msg, { ...options, type: 'warn' });
+toast.error = (msg: string, options?: Partial<Toast>) =>
+  toast(msg, { ...options, type: 'error' });
diff --git a/src/components/useComponents/Fab.tsx b/src/components/useComponents/Fab.tsx
index 3f36e8ac..2b679623 100644
--- a/src/components/useComponents/Fab.tsx
+++ b/src/components/useComponents/Fab.tsx
@@ -10,7 +10,7 @@ import { Dynamic } from 'solid-js/web';
 import type { FabProps } from '../Fab';
 import { Fab, FabStyle } from '../Fab';
 import { IconButtonStyle } from '../IconButton';
-import { mountComponents } from '../../helper';
+import { mountComponents } from './helper';
 
 let mounted = false;
 
diff --git a/src/components/useComponents/Manga.tsx b/src/components/useComponents/Manga.tsx
index bf5feb18..4a3f5f51 100644
--- a/src/components/useComponents/Manga.tsx
+++ b/src/components/useComponents/Manga.tsx
@@ -8,7 +8,8 @@ import { createStore, produce } from 'solid-js/store';
 import { IconButton, IconButtonStyle } from '../IconButton';
 import type { MangaProps } from '../Manga';
 import { buttonListDivider, MangaStyle, Manga } from '../Manga';
-import { mountComponents, request, saveAs } from '../../helper';
+import { request, saveAs } from '../../helper';
+import { mountComponents } from './helper';
 import { toast } from './Toast';
 
 export type SelfMangaProps = MangaProps & {
@@ -111,7 +112,7 @@ export const useManga = async (initProps?: Partial<SelfMangaProps>) => {
       });
       saveAs(new Blob([zipped]), `${document.title}.zip`);
       setTip('下载完成');
-      toast('下载完成');
+      toast.success('下载完成');
     };
 
     return (
diff --git a/src/components/useComponents/Toast.tsx b/src/components/useComponents/Toast.tsx
index 529aec79..8c83a797 100644
--- a/src/components/useComponents/Toast.tsx
+++ b/src/components/useComponents/Toast.tsx
@@ -1,58 +1,26 @@
-import MdCheckCircle from '@material-design-icons/svg/round/check_circle.svg';
-import MdWarning from '@material-design-icons/svg/round/warning.svg';
-import MdError from '@material-design-icons/svg/round/error.svg';
-
-import type { ToastOptions } from 'solid-toast';
-import solidToast, { Toaster } from 'solid-toast';
-
-import { mountComponents } from '../../helper';
+import { mountComponents } from './helper';
+import { ToastStyle, Toaster, toast as _toast } from '../Toast';
 
 let dom: HTMLDivElement;
 
-export const toast = (message: string, opts?: ToastOptions) => {
-  if (!dom) {
+const init = () => {
+  if (!dom)
     dom = mountComponents('toast', () => (
-      <Toaster
-        position="bottom-right"
-        containerStyle={{ 'z-index': '9999999999' }}
-        toastOptions={{
-          duration: 3000,
-          style: {
-            background: '#1f2937',
-            color: '#f3f4f6',
-          },
-        }}
-      />
+      <>
+        <Toaster />
+        <style type="text/css">{ToastStyle}</style>
+      </>
     ));
-  }
-
-  solidToast(message, opts);
 };
 
-toast.success = (message: string, opts?: ToastOptions) =>
-  toast(message, {
-    icon: (
-      <div style={{ color: '#23bb35', display: 'flex' }}>
-        <MdCheckCircle />
-      </div>
-    ),
-    ...opts,
-  });
-toast.warn = (message: string, opts?: ToastOptions) =>
-  toast(message, {
-    icon: (
-      <div style={{ color: '#f0c53e', display: 'flex' }}>
-        <MdWarning />
-      </div>
-    ),
-    ...opts,
-  });
-toast.error = (message: string, opts?: ToastOptions) =>
-  toast(message, {
-    icon: (
-      <div style={{ color: '#e45042', display: 'flex' }}>
-        <MdError />
-      </div>
-    ),
-    ...opts,
-  });
+export const toast = new Proxy(_toast, {
+  get(target, propKey: keyof typeof _toast) {
+    init();
+    return target[propKey];
+  },
+  apply(target, propKey: keyof typeof _toast, args) {
+    init();
+    const fn: any = propKey ? target[propKey] : target;
+    return fn(...args) as unknown;
+  },
+});
diff --git a/src/components/useComponents/helper.ts b/src/components/useComponents/helper.ts
new file mode 100644
index 00000000..66407d63
--- /dev/null
+++ b/src/components/useComponents/helper.ts
@@ -0,0 +1,12 @@
+import type { JSX } from 'solid-js';
+import { render } from 'solid-js/web';
+
+/** 挂载 solid-js 组件 */
+export const mountComponents = (id: string, fc: () => JSX.Element) => {
+  const dom = document.createElement('div');
+  dom.id = id;
+  document.body.appendChild(dom);
+  const shadowDom = dom.attachShadow({ mode: 'open' });
+  render(fc, shadowDom);
+  return dom;
+};
diff --git a/src/components/useComponents/toast.module.css b/src/components/useComponents/toast.module.css
deleted file mode 100644
index c758bc25..00000000
--- a/src/components/useComponents/toast.module.css
+++ /dev/null
@@ -1,73 +0,0 @@
-.toast {
-  will-change: transform;
-
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-
-  padding: 0.7em 1em;
-
-  color: #f3f4f6;
-
-  background: #1f2937;
-  border-radius: 0.5em;
-  box-shadow: rgb(0 0 0 / 10%) 0 3px 10px, rgb(0 0 0 / 5%) 0 3px 3px;
-
-  &[data-visible="true"] {
-    animation: enter 0.2s ease-out;
-  }
-
-  &[data-visible="false"] {
-    animation: leave 0.15s ease-in forwards;
-  }
-}
-
-button {
-  cursor: pointer;
-
-  margin-left: 1em;
-  padding: 0;
-
-  color: currentcolor;
-
-  background-color: transparent;
-  border: none;
-
-  &:hover {
-    color: #e5e7ebcc;
-  }
-}
-
-.progress {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-
-  height: 2px;
-
-  background-color: #41bcf4;
-}
-
-@keyframes enter {
-  0% {
-    transform: scale(0.9);
-    opacity: 0;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes leave {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  100% {
-    transform: scale(0.9);
-    opacity: 0;
-  }
-}
diff --git a/src/helper/import.ts b/src/helper/import.ts
index a25b230e..41f0fc27 100644
--- a/src/helper/import.ts
+++ b/src/helper/import.ts
@@ -1,11 +1,16 @@
 declare const isDevMode: boolean;
 
+const GMRe = /^GM/;
+const gmApiList = Object.keys(window).filter((name) => GMRe.test(name));
+const gmApiMap = Object.fromEntries(
+  gmApiList.map((name) => [name, window[name]]),
+);
+
 unsafeWindow.crsLib = {
   // 有些 cjs 模块会检查这个，所以在这里声明下
   process: { env: { NODE_ENV: process.env.NODE_ENV } },
-  // 把 GM 相关函数放进去以便其中使用
-  GM_xmlhttpRequest,
-  GM,
+  // 把 GM API 放进去以便使用
+  ...gmApiMap,
 };
 
 /**
@@ -18,11 +23,11 @@ const selfImportSync = (name: string) => {
 
   // 通过提供 cjs 环境的变量来兼容 umd 模块加载器
   // 将模块导出变量放到 crsLib 对象里，防止污染全局作用域和网站自身的模块产生冲突
-  return GM_addElement('script', {
+  GM_addElement('script', {
     textContent: `
       window.crsLib['${name}'] = {};
       ${isDevMode ? `console.time('导入 ${name}');` : ''}
-      (function (process, require, exports, module, GM, GM_xmlhttpRequest) {
+      (function (process, require, exports, module, ${gmApiList.join(', ')}) {
         ${code}
       })(
         window.crsLib.process,
@@ -36,8 +41,7 @@ const selfImportSync = (name: string) => {
             return window.crsLib['${name}'];
           },
         },
-        window.crsLib.GM,
-        window.crsLib.GM_xmlhttpRequest,
+        ${gmApiList.map((apiName) => `window.crsLib.${apiName}`).join(', ')}
       );
       ${isDevMode ? `console.timeEnd('导入 ${name}');` : ''}
     `,
diff --git a/src/helper/index.ts b/src/helper/index.ts
index 46754623..955ef7e7 100644
--- a/src/helper/index.ts
+++ b/src/helper/index.ts
@@ -1,5 +1,4 @@
-import type { JSX } from 'solid-js';
-import { render } from 'solid-js/web';
+import { toast } from '../components/useComponents/Toast';
 
 export type AsyncReturnType<T extends (...args: any) => Promise<any>> =
   T extends (...args: any) => Promise<infer R> ? R : any;
@@ -43,16 +42,6 @@ export const insertNode = (
   node.insertBefore(frag, referenceNode);
 };
 
-/** 挂载 solid-js 组件 */
-export const mountComponents = (id: string, fc: () => JSX.Element) => {
-  const dom = document.createElement('div');
-  dom.id = id;
-  document.body.appendChild(dom);
-  const shadowDom = dom.attachShadow({ mode: 'open' });
-  render(fc, shadowDom);
-  return dom;
-};
-
 /** 返回 Dom 的点击函数 */
 export const querySelectorClick = (selector: string) => {
   const dom = querySelector(selector);
@@ -158,6 +147,7 @@ export const request = async <T = any>(
   url: string,
   details?: Partial<Tampermonkey.Request<any>> & {
     errorText?: string;
+    noTip?: true;
   },
   errorNum = 0,
 ): Promise<Tampermonkey.Response<T>> => {
@@ -172,11 +162,8 @@ export const request = async <T = any>(
     if (res.status !== 200) throw new Error(errorText);
     return res;
   } catch (error) {
-    if (errorNum > 3) {
-      if (errorText) {
-        const { useToast } = require('../main');
-        useToast().error(errorText);
-      }
+    if (errorNum >= 3) {
+      if (errorText && !details?.noTip) toast.error(errorText);
       throw new Error(errorText);
     }
     console.error(errorText, error);
diff --git a/src/helper/useInit.tsx b/src/helper/useInit.tsx
index eedd0891..2a399377 100644
--- a/src/helper/useInit.tsx
+++ b/src/helper/useInit.tsx
@@ -1,8 +1,10 @@
+import { For } from 'solid-js';
 import { useManga } from '../components/useComponents/Manga';
 import { useFab } from '../components/useComponents/Fab';
 import { toast } from '../components/useComponents/Toast';
 import { useSiteOptions } from './useSiteOptions';
 import { useSpeedDial } from './useSpeedDial';
+import { request } from '.';
 
 /**
  * 对所有支持站点页面的初始化操作的封装
@@ -32,43 +34,56 @@ export const useInit = async <T extends Record<string, any>>(
   // 检查脚本的版本变化，提示用户
   const version = await GM.getValue<string>('Version');
   if (version && version !== GM.info.script.version) {
-    // FIXME: 实现通过 jsdelivr 获取指定版本的更新内容
-    //     const changelog = `
-    // ## 新增
-
-    // - 通过 M 键切换页面填充
-
-    // ## 修复
-
-    // - 增加拷贝漫画的支持域名
-    // - 修复漫画柜失效问题
-    // `;
     (async () => {
-      // const res = await request(
-      //   `https://cdn.jsdelivr.net/gh/hymbz/ComicReadScriptTest@${GM.info.script.version}/file`,
-      //   { errorText: '' },
-      // );
-      // toast(() => (
-      //   <div>
-      //     <h2>ComicReadScrip 已更新到 {GM.info.script.version}</h2>
-      //     <div className="md">
-      //       {res.responseText.match(/##.+?\n|(-.+?\n)+/g)!.map((mdText) => {
-      //         if (mdText[0] === '#') return <h2>{mdText.split('##')}</h2>;
-      //         if (mdText[0] === '-')
-      //           return (
-      //             <ul>
-      //               {mdText.match(/(?<=- ).+/g)!.map((item) => (
-      //                 <li>{item}</li>
-      //               ))}
-      //             </ul>
-      //           );
-      //         return null;
-      //       })}
-      //     </div>
-      //   </div>
-      // ));
-      // GM_setValue('Version', GM.info.script.version);
+      const res = await request(
+        `https://cdn.jsdelivr.net/gh/hymbz/ComicReadScriptTest@${GM.info.script.version}/docs/LatestChange.md`,
+        { errorText: '' },
+      );
+      toast(
+        () => (
+          <>
+            <h2>🥳 ComicRead 已更新到 v{GM.info.script.version}</h2>
+            <div class="md">
+              <For each={res.responseText.match(/^### [^[].+?$|^\* .+?$/gm)}>
+                {(mdText) => {
+                  switch (mdText[0]) {
+                    case '#':
+                      return <h3>{mdText.replace('### ', '')}</h3>;
+                    case '*':
+                      return (
+                        <ul>
+                          <For each={mdText.match(/(?<=:.+?: ).+?(?= \()/)}>
+                            {(item) => <li>{item}</li>}
+                          </For>
+                        </ul>
+                      );
+                    default:
+                      return null;
+                  }
+                }}
+              </For>
+            </div>
+          </>
+        ),
+        {
+          id: 'Version Tip',
+          duration: Infinity,
+          // 手动点击关掉通知后才不会再次弹出
+          onDismiss: () => GM.setValue('Version', GM.info.script.version),
+        },
+      );
     })();
+
+    // 监听储存的版本数据的变动，如果和当前版本一致就关掉弹窗
+    // 防止在更新版本后一次性打开多个页面，不得不一个一个关过去
+    const listenerId = await GM.addValueChangeListener(
+      'Version',
+      async (_, __, newVersion) => {
+        if (newVersion !== GM.info.script.version) return;
+        toast.dismiss('Version Tip');
+        await GM.removeValueChangeListener(listenerId);
+      },
+    );
   }
 
   let menuId: number;
@@ -115,7 +130,7 @@ export const useInit = async <T extends Record<string, any>>(
       const showComic = async (show: boolean = options.autoShow) => {
         if (loading) {
           toast.warn('加载图片中，请稍候', {
-            unmountDelay: 1500,
+            duration: 1500,
             id: '加载图片中，请稍候',
           });
           return;
diff --git a/src/site/ehentai.tsx b/src/site/ehentai.tsx
index 47b5d96a..12ff63ff 100644
--- a/src/site/ehentai.tsx
+++ b/src/site/ehentai.tsx
@@ -146,7 +146,7 @@ declare const selected_link: HTMLElement;
         `https://nhentai.net/api/galleries/search?query=${encodeURI(
           titleDom.innerText,
         )}`,
-        { errorText: '' },
+        { errorText: 'nhentai 匹配出错', noTip: true },
       );
     } catch (_) {
       newTagLine.innerHTML = `
diff --git a/src/site/jm.tsx b/src/site/jm.tsx
index 2e501420..9dff4527 100644
--- a/src/site/jm.tsx
+++ b/src/site/jm.tsx
@@ -15,7 +15,7 @@ import {
 
   while (!unsafeWindow?.onImageLoaded) {
     if (document.readyState === 'complete') {
-      toast.error('无法获取图片', { duration: 60000 });
+      toast.error('无法获取图片', { duration: Infinity });
       return;
     }
     // eslint-disable-next-line no-await-in-loop