1

package.json

@@ -1,6 +1,6 @@
 {
     "name": "betternovelpia",
-    "version": "10.5.6",
+    "version": "10.6.0",
     "license": "UNLICENSED",
     "scripts": {
         "build": "webpack --config webpack.prod.js",

src/module/Bookmark.tsx

@@ -7,7 +7,6 @@ import {isDarkMode} from "../util/IsDarkMode";
 import {isPageViewer} from "../util/IsPageViewer";
 import {appendSide} from "../util/AppendSide";
 import {useLongPress} from "use-long-press";
-import {Header} from "../util/ApeendHeader";
 import {novelLoaded} from "../util/NovelLoaded";
 import {NovelContinueBox} from "../util/NovelContinueBox";
 
@@ -396,11 +395,7 @@ function Viewer() {
                       : "#0000007a"};
     `;
 
-    return (
-        <Header>
-            <BookmarkIcon className="icon ion-bookmark" onClick={click} {...longClick}/>
-        </Header>
-    );
+    return <BookmarkIcon className="icon ion-bookmark" onClick={click} {...longClick}/>;
 }
 
 export default {
@@ -463,9 +458,11 @@ export default {
         }
 
         if (/^\/viewer\//.test(location.pathname)) {
-            const appContainer = document.createElement("td");
-            appContainer.style.width = "63px";
-            $(HEADER_BAR).children().eq(6).before(appContainer);
+            const appContainer = document.createElement("div");
+            appContainer.style.width = "20px";
+            appContainer.style.height = "20px";
+
+            $(`${HEADER_BAR} .menu-top-right`).children().eq(2).before(appContainer);
 
             const root = createRoot(appContainer);
             root.render(<Viewer/>);

src/module/Layout.ts

@@ -69,7 +69,7 @@ export default {
         }
     },
     property: "start",
-    start() {
+    start: function () {
         const hideAdEnable = GM_getValue<boolean>("HideAd", false);
         const hideEventEnable = GM_getValue<boolean>("HideEvent", false);
         const hideRecommendEffectEnable = GM_getValue<boolean>("HideRecommendEffect", false);
@@ -124,16 +124,22 @@ export default {
         }
 
         if (infoUnfoldEnable && /^\/novel\//.test(location.pathname)) {
-            const moreInfoButton = document.querySelector("#more_info_btn") as HTMLElement;
-            const moreInfo = document.querySelector(".more_info") as HTMLElement;
+            const moreInfoButton = document.querySelector<HTMLElement>("#more_info_btn")
+            const moreInfo = document.querySelector<HTMLElement>(".more_info")
 
-            if (moreInfoButton !== null && moreInfo !== null) {
+            if (moreInfoButton && moreInfo) {
                 moreInfoButton.style.display = "none";
                 moreInfo.style.display = "initial";
             }
         }
 
         if (naviColorEnable && /^\/viewer\//.test(location.pathname)) {
+            const changeTheme = () => {
+                const color = document.querySelector<HTMLElement>("#viewer_no_drag")!.style.backgroundColor;
+                document.querySelector<HTMLElement>(HEADER_BAR)!.style.backgroundColor = color;
+                document.querySelector<HTMLElement>(FOOTER_BAR)!.style.backgroundColor = color;
+            };
+
             unsafeWindow.viewer_display =
                 new Proxy(unsafeWindow.viewer_display, {
                     apply(target, thisArg, argArray) {
@@ -142,13 +148,6 @@ export default {
                     }
                 });
 
-            function changeTheme() {
-                const color = (document.querySelector("#viewer_no_drag") as HTMLElement).style.backgroundColor;
-
-                (document.querySelector(HEADER_BAR) as HTMLElement).style.backgroundColor = color;
-                (document.querySelector(FOOTER_BAR) as HTMLElement).style.backgroundColor = color;
-            }
-
             changeTheme();
         }
 

src/module/Setting.tsx

@@ -163,9 +163,9 @@ function Setting() {
       height: 50px;
       box-shadow: rgb(0 0 0 / 16%) 0 1px 4px 0;
       ${isDarkMode()
-              ? css`background-color: black;
+        ? css`background-color: black;
                 color: white;`
-              : css`background-color: white;`};
+        : css`background-color: white;`};
     `;
 
     const UnderDiv = styled.div`
@@ -176,9 +176,9 @@ function Setting() {
       height: 30px;
       box-shadow: rgb(0 0 0 / 16%) 0 1px 4px 0;
       ${isDarkMode()
-              ? css`background-color: black;
+        ? css`background-color: black;
                 color: white;`
-              : css`background-color: white;`};
+        : css`background-color: white;`};
     `;
 
     return (

src/module/ViewNovelToCookie.ts

@@ -1,6 +1,15 @@
 import $ from "jquery";
 import {fakeViewer} from "../util/FakeViewer";
 import {viewerData} from "../util/ViewerData";
+import Cookies from "js-cookie";
+
+function resetCookie(name: string, value: string) {
+    Cookies.set(name, value, {
+        domain: ".novelpia.com",
+        path: "/",
+        expires: new Date(new Date().setFullYear(new Date().getFullYear() + 1))
+    });
+}
 
 export default {
     include: /^\/viewer\//,
@@ -24,26 +33,29 @@ export default {
         }
     },
     async start() {
-        const blocked = $(".one-event-viewer-plus");
+        const blocked = $(`p:contains("플러스 멤버십이"), p:contains("열람에 회원가입/로그인이")`);
 
-        if (!blocked.length) return;
+        if (!blocked.length)
+            return;
 
-        const loginKey = GM_getValue<string>("ViewNovelToCookie_LOGINKEY", "").trim();
-        const userKey = GM_getValue<string>("ViewNovelToCookie_USERKEY", "").trim();
+        const loginKey = GM_getValue("ViewNovelToCookie_LOGINKEY", "") as string;
+        const userKey = GM_getValue("ViewNovelToCookie_USERKEY", "") as string;
 
         if (!loginKey || !userKey)
             return;
 
-        const data = await viewerData(location.pathname.substring(8), `LOGINKEY=${loginKey}; USERKEY=${userKey};`);
-
-        if (!data.length) return;
+        const oldLoginKey = Cookies.get("LOGINKEY") ?? "";
+        const oldUserKey = Cookies.get("USERKEY") ?? "";
 
-        fakeViewer(blocked, data);
+        resetCookie("LOGINKEY", loginKey);
+        resetCookie("USERKEY", userKey);
 
-        const oldGetCommentBox = unsafeWindow.get_comment_box
-            .toString()
-            .replace("response.status == '200'", `response.status == '200' || response.errmsg.includes("PLUS")`);
+        const data = await viewerData(location.pathname.substring(8), () => {
+            resetCookie("LOGINKEY", oldLoginKey);
+            resetCookie("USERKEY", oldUserKey);
+        });
 
-        unsafeWindow.get_comment_box = () => eval(`${oldGetCommentBox}get_comment_box()`);
+        if (data.length > 0)
+            fakeViewer(blocked, data);
     }
 } as Module;

src/util/Selectors.ts

@@ -1,6 +1,6 @@
 export const SIDE_LEFT = ".am-sideleft ul";
 
-export const HEADER_BAR = "#header_bar tr";
+export const HEADER_BAR = "#header_bar";
 
 export const NOVEL_DRAWING = "#novel_drawing";
 

src/util/ViewerData.ts

@@ -1,33 +1,34 @@
-export async function viewerData(url: string, cookie?: string): Promise<NovelData[]> {
-    return new Promise((resolve, reject) => {
-        GM_xmlhttpRequest({
-            data: "size=14",
-            headers: {
-                "Content-Type": "application/x-www-form-urlencoded",
-                Cookie: cookie ?? document.cookie
-            },
+export function fetchWithTimeout(input: RequestInfo, options: RequestInit, timeout = 5000): Promise<Response> {
+    // @ts-ignore
+    return Promise.race([
+        fetch(input, options),
+        new Promise((_, reject) =>
+            setTimeout(() => reject(new Error("timeout")), timeout)
+        )
+    ]);
+}
+
+export async function viewerData(url: string, code?: () => void): Promise<NovelData[]> {
+    try {
+        const response: { c: string, s: { text: string }[] } = await (await fetchWithTimeout(`/proc/viewer_data/${url}`, {
             method: "POST",
-            timeout: 5000,
-            url: `/proc/viewer_data/${url}`,
-            onerror: (response) => {
-                reject(response);
+            cache: "no-cache",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded"
             },
-            onload: (response) => {
-                console.log(response.responseText);
-
-                const data: { c: string, s: { text: string }[] } = JSON.parse(response.responseText!);
+            body: new URLSearchParams({
+                size: "14"
+            })
+        })).json();
 
-                resolve(data.s.map(({text}) => {
-                    return {
-                        text,
-                        size: 11,
-                        align: "left"
-                    };
-                }));
-            },
-            ontimeout: (response) => {
-                reject(response);
-            }
+        return response.s.map(({text}) => {
+            return {
+                text: text,
+                size: 11,
+                align: "left"
+            };
         });
-    });
+    } finally {
+        code?.();
+    }
 }