Insert SyncButton on bilibili bangumi detail page to update progress

插入一个手动同步的按钮，以提交追番进度到服务器

background/messages/bili.ts

@@ -3,6 +3,7 @@ import type { PlasmoMessaging } from "@plasmohq/messaging";
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
   const { token, siteUrl } = await chrome.storage.local.get(["token", "siteUrl"]);
 
+  // 添加手办
   if (req.body.action === "submitAddForm") {
     const { values } = req.body;
 
@@ -32,6 +33,21 @@ const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
 
     res.send(addReq);
   }
+
+  // 更新追番进度
+  if (req.body.action === "updateBangumiProgress") {
+    const { values } = req.body;
+
+    const updateRequest = await fetch(`${siteUrl}/api/bangumi/update`, {
+      method: "POST",
+      body: JSON.stringify(values),
+      headers: {
+        "paul-token-code": token,
+      },
+    }).then((res) => res.json());
+
+    res.send(updateRequest);
+  }
 }
 
 export default handler;

components/biz/toy/index.tsx

@@ -24,11 +24,7 @@ const getInfo = async () => {
   [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
 
   if (tab && !tab.url.includes("chrome")) {
-    const a = await chrome.tabs.sendMessage(tab.id, { type: 'toolbox:getBiliToy' });
-
-    console.log('get toy:', a);
-
-    return a;
+    return await chrome.tabs.sendMessage(tab.id, { type: 'toolbox:getBiliToy' });
   }
 }
 

contents/biliProgress.tsx

@@ -0,0 +1,90 @@
+import { useState } from "react";
+import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo";
+import { sendToBackground } from "@plasmohq/messaging";
+import { postPageMessage, waitPageMessage } from "~utils/pageMessage";
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://www.bilibili.com/bangumi/media/*"],
+};
+
+export const getInlineAnchor: PlasmoGetInlineAnchor = () => {
+  return document.querySelector(".bangumi-btn");
+}
+
+// Use this to optimize unmount lookups
+// export const getShadowHostId = () => "plasmo-inline-example-unique-id"
+
+const SyncButton = () => {
+  const [status, setStatus] = useState(0);
+
+  const onClick = () => {
+    postPageMessage({ type: "toolbox::getBiliProgress" });
+
+    waitPageMessage("toolbox::sendBiliProgress").then((res) => {
+      if (res.type !== "toolbox::sendBiliProgress") {
+        return;
+      }
+
+      if (!res.value) {
+        setStatus(3);
+        return;
+      }
+
+      console.log("Toolbox: 获得追番信息", res.value);
+
+      sendToBackground({
+        name: "bili",
+        body: {
+          action: "updateBangumiProgress",
+          values: res.value,
+        },
+      }).then((res) => {
+        if (res.status === "Success") {
+          setStatus(1);
+        }
+        else {
+          setStatus(2);
+        }
+      }).catch((e) => {
+        if (e instanceof Error) {
+          setStatus(2);
+        }
+      });
+    });
+  }
+
+  const text = (() => {
+    if (status === 0) {
+      return "同步追番进度";
+    }
+    else if (status === 1) {
+      return "✔️ 同步成功";
+    }
+    else if (status === 2) {
+      return "❌ 同步失败";
+    }
+    else if (status === 3) {
+      return "❌ 没有追过此番";
+    }
+  })();
+
+  return (
+    <button
+      style={{
+        fontSize: 18,
+        color: "#fff",
+        border: "3px solid transparent",
+        borderRadius: 8,
+        cursor: "pointer",
+        padding: ".5em 1em",
+        whiteSpace: "nowrap",
+        background: "#f36392",
+      }}
+      onClick={onClick}
+    >
+      {text}
+    </button>
+  );
+}
+
+export default SyncButton;

contents/injectBili.ts

@@ -1,4 +1,5 @@
 import type { PlasmoCSConfig } from "plasmo";
+import { postPageMessage, receivePageMessage } from "~utils/pageMessage";
 
 export const config: PlasmoCSConfig = {
   run_at: "document_start",
@@ -6,8 +7,8 @@ export const config: PlasmoCSConfig = {
   world: "MAIN",
 };
 
-console.log("尝试获取当前追番进度");
-
+// 番剧 ID
+let seasonId;
 
 // 所有剧集（是个数组）
 // {
@@ -43,6 +44,9 @@ let progress;
 // 进度（对应 section 接口里面所有剧集数组的索引）
 let progressIndex;
 
+// 给接口使用的结果
+let result;
+
 const open = XMLHttpRequest.prototype.open;
 const send = XMLHttpRequest.prototype.send;
 
@@ -66,7 +70,9 @@ Object.defineProperty(XMLHttpRequest.prototype, "send", {
           sections = JSON.parse(this.response).result.main_section.episodes;
         }
         else if (this._paul_url.includes("season/user/status")) {
-          progress = JSON.parse(this.response).result.progress;
+          seasonId = new URL(this._paul_url).searchParams.get("season_id");
+
+          progress = JSON.parse(this.response).result.progress || { last_ep_id: -1 };
         }
       })
     }
@@ -78,12 +84,29 @@ Object.defineProperty(XMLHttpRequest.prototype, "send", {
 
 const checkDataIsHandled = window.setInterval(() => {
   if (sections && progress) {
-    progressIndex = sections.findIndex(
-      (item) => item.id === progress.last_ep_id
-    );
+    if (progress.last_ep_id !== -1) {
+      progressIndex = sections.findIndex(
+        (item) => item.id === progress.last_ep_id
+      );
 
-    console.log("播放进度获取完成", progressIndex);
+      console.log("Toolbox: 追番进度获取完成", progressIndex);
+
+      result = {
+        id: seasonId,
+        seem: progressIndex,
+        name: document.querySelector<HTMLSpanElement>(".media-info-title-t").innerText,
+      };
+    } else {
+      console.log("Toolbox: 追番进度获取失败，可能从未观看");
+    }
 
     window.clearInterval(checkDataIsHandled);
   }
 }, 1000);
+
+receivePageMessage(() => {
+  postPageMessage({
+    type: "toolbox::sendBiliProgress",
+    value: result,
+  });
+}, "toolbox::getBiliProgress");

contents/read.ts

@@ -123,8 +123,6 @@ const getTags = () => {
 }
 
 chrome.runtime.onMessage.addListener((req, sender, send) => {
-  console.log(req);
-
   if (req.type === "toolbox:getInfo") {
     send({
       title: getTitle(),

types/pageMessage.d.ts

@@ -0,0 +1,16 @@
+declare namespace PageMessage {
+  type Messages = GetBiliProgressMsg | SendBiliProgressMsg;
+
+  interface GetBiliProgressMsg {
+    type: "toolbox::getBiliProgress",
+  }
+
+  interface SendBiliProgressMsg {
+    type: "toolbox::sendBiliProgress",
+    value: {
+      id: number;
+      name: string;
+      seem: number;
+    },
+  }
+}

utils/pageMessage.ts

@@ -0,0 +1,46 @@
+// 发送一条消息（二次封装类型）
+export const postPageMessage = (data: PageMessage.Messages) => {
+  return window.postMessage(data);
+};
+
+// 接收一条消息
+export const receivePageMessage = (
+  fn: (data: PageMessage.Messages) => void,
+  eventName?: PageMessage.Messages["type"]
+) => {
+  const eventFn = (ev: MessageEvent<PageMessage.Messages>) => {
+    if (!ev.data) {
+      return;
+    }
+
+    if (eventName && ev.data.type === eventName) {
+      fn(ev.data);
+    } else if (!eventName && ev.data.type?.includes("toolbox::")) {
+      fn(ev.data);
+    }
+  };
+
+  window.addEventListener("message", eventFn);
+
+  return () => {
+    window.removeEventListener("message", eventFn);
+  };
+};
+
+// 等待一条消息的推送
+export const waitPageMessage = (eventName: PageMessage.Messages["type"]) => {
+  return new Promise<PageMessage.Messages>((resolve) => {
+    const eventFn = (ev: MessageEvent<PageMessage.Messages>) => {
+      if (!ev.data) {
+        return;
+      }
+
+      if (eventName && ev.data.type === eventName) {
+        window.removeEventListener("message", eventFn);
+        resolve(ev.data);
+      }
+    };
+
+    window.addEventListener("message", eventFn);
+  });
+};