Insert SyncButton on bilibili bangumi detail page to update progress

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

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(),