Merge pull request #141 from kawamataryo/support-tiktock

feat: support for TikTock

README.md

@@ -9,7 +9,7 @@
 <a href="https://www.producthunt.com/posts/sky-follower-bridge?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-sky&#0045;follower&#0045;bridge" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=666851&theme=light" alt="Sky&#0032;Follower&#0032;Bridge - Migrate&#0032;your&#0032;social&#0032;connections&#0032;from&#0032;𝕏&#0032;to&#0032;Bluesky | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
 
-Instantly find and follow the same users from your 𝕏(Twitter) follows on Bluesky.
+Instantly find and follow the same users from your 𝕏(Twitter), Instagram, TikTok, and Threads follows on Bluesky.
 
 https://github.com/kawamataryo/sky-follower-bridge/assets/11070996/67bdd228-dc67-4d0a-ac18-f3a3e0c7adf9
 

locales/de/messages.json

@@ -290,5 +290,14 @@
   "share_on_bluesky": {
     "message": "Auf Bluesky teilen",
     "description": "Text for the share on Bluesky button"
+  },
+  "service_scanning_warning": {
+    "message": "Das Scannen von $service$ ist eine experimentelle Funktion. Die Ergebnisse können Falschmeldungen enthalten oder instabil sein. Bitte vor dem Folgen überprüfen.",
+    "description": "Text for the service scanning warning message",
+    "placeholders": {
+      "service": {
+        "content": "$1"
+      }
+    }
   }
 }

locales/en/messages.json

@@ -290,5 +290,14 @@
   "share_on_bluesky": {
     "message": "Share on Bluesky",
     "description": "Text for the share on Bluesky button"
+  },
+  "service_scanning_warning": {
+    "message": "$service$ scanning is an experimental feature. Results may contain false positives or be unstable. Please verify before following.",
+    "description": "Text for the service scanning warning message",
+    "placeholders": {
+      "service": {
+        "content": "$1"
+      }
+    }
   }
 }

locales/es/messages.json

@@ -290,5 +290,14 @@
   "share_on_bluesky": {
     "message": "Compartir en Bluesky",
     "description": "Text for the share on Bluesky button"
+  },
+  "service_scanning_warning": {
+    "message": "El escaneo de $service$ es una función experimental. Los resultados pueden contener falsos positivos o ser inestables. Por favor, verifique antes de seguir.",
+    "description": "Text for the service scanning warning message",
+    "placeholders": {
+      "service": {
+        "content": "$1"
+      }
+    }
   }
 }

locales/fr/messages.json

@@ -290,5 +290,14 @@
   "share_on_bluesky": {
     "message": "Partager sur Bluesky",
     "description": "Text for the share on Bluesky button"
+  },
+  "service_scanning_warning": {
+    "message": "L'analyse de $service$ est une fonctionnalité expérimentale. Les résultats peuvent contenir des faux positifs ou être instables. Veuillez vérifier avant de suivre.",
+    "description": "Text for the service scanning warning message",
+    "placeholders": {
+      "service": {
+        "content": "$1"
+      }
+    }
   }
 }

locales/it/messages.json

@@ -290,5 +290,14 @@
   "share_on_bluesky": {
     "message": "Condividi su Bluesky",
     "description": "Text for the share on Bluesky button"
+  },
+  "service_scanning_warning": {
+    "message": "La scansione di $service$ è una funzionalità sperimentale. I risultati potrebbero contenere falsi positivi o essere instabili. Si prega di verificare prima di seguire.",
+    "description": "Text for the service scanning warning message",
+    "placeholders": {
+      "service": {
+        "content": "$1"
+      }
+    }
   }
 }

locales/ja/messages.json

@@ -290,5 +290,14 @@
   "share_on_bluesky": {
     "message": "Blueskyでシェア",
     "description": "Text for the share on Bluesky button"
+  },
+  "service_scanning_warning": {
+    "message": "$service$のスキャンは実験的な機能です。誤検出が含まれる可能性があり、不安定な場合があります。フォローする前に確認してください。",
+    "description": "Text for the service scanning warning message",
+    "placeholders": {
+      "service": {
+        "content": "$1"
+      }
+    }
   }
 }

locales/ko/messages.json

@@ -290,5 +290,14 @@
   "share_on_bluesky": {
     "message": "Bluesky에서 공유",
     "description": "Text for the share on Bluesky button"
+  },
+  "service_scanning_warning": {
+    "message": "$service$ 스캔은 실험적인 기능입니다. 결과에 오탐지가 포함되거나 불안정할 수 있습니다. 팔로우하기 전에 확인해 주세요.",
+    "description": "Text for the service scanning warning message",
+    "placeholders": {
+      "service": {
+        "content": "$1"
+      }
+    }
   }
 }

locales/pt_BR/messages.json

@@ -290,5 +290,14 @@
   "share_on_bluesky": {
     "message": "Compartilhar no Bluesky",
     "description": "Text for the share on Bluesky button"
+  },
+  "service_scanning_warning": {
+    "message": "A varredura do $service$ é um recurso experimental. Os resultados podem conter falsos positivos ou serem instáveis. Por favor, verifique antes de seguir.",
+    "description": "Text for the service scanning warning message",
+    "placeholders": {
+      "service": {
+        "content": "$1"
+      }
+    }
   }
 }

locales/zh_CN/messages.json

@@ -290,5 +290,14 @@
   "share_on_bluesky": {
     "message": "在Bluesky上分享",
     "description": "Text for the share on Bluesky button"
+  },
+  "service_scanning_warning": {
+    "message": "$service$扫描是一项实验性功能。结果可能包含误报或不稳定。请在关注前验证。",
+    "description": "Text for the service scanning warning message",
+    "placeholders": {
+      "service": {
+        "content": "$1"
+      }
+    }
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sky-follower-bridge",
   "displayName": "Sky Follower Bridge",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "__MSG_extension_description__",
   "author": "kawamataryou",
   "scripts": {
@@ -28,7 +28,7 @@
     "@plasmohq/storage": "^1.12.0",
     "@tanstack/react-virtual": "^3.11.2",
     "@vitejs/plugin-react": "^4.3.3",
-    "consola": "^3.3.1",
+    "consola": "^3.4.0",
     "destr": "^2.0.3",
     "framer-motion": "^11.11.11",
     "plasmo": "^0.84.2",
@@ -74,7 +74,8 @@
       "https://twitter.com/*",
       "https://x.com/*",
       "https://www.threads.net/*",
-      "https://www.instagram.com/*"
+      "https://www.instagram.com/*",
+      "https://www.tiktok.com/*"
     ],
     "browser_specific_settings": {
       "gecko": {

src/components/ServiceAlert.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+type Props = {
+  serviceName: string;
+};
+
+const ServiceAlert = ({ serviceName }: Props) => {
+  return (
+    <div
+      role="alert"
+      className="alert border-warning p-2 gap-2 mb-4 text-warning rounded-xl"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-5 w-5 shrink-0 stroke-warning"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+        />
+      </svg>
+      <span className="text-xs">
+        {chrome.i18n.getMessage("service_scanning_warning", [serviceName])}
+      </span>
+    </div>
+  );
+};
+
+export default ServiceAlert;

src/contents/App.tsx

@@ -8,6 +8,7 @@ import { match } from "ts-pattern";
 import AlertError from "~components/AlertError";
 import LoadingCards from "~components/LoadingCards";
 import Modal from "~components/Modal";
+import ServiceAlert from "~components/ServiceAlert";
 import { useRetrieveBskyUsers } from "~hooks/useRetrieveBskyUsers";
 import { MESSAGE_NAMES, SERVICE_TYPE, STORAGE_KEYS } from "~lib/constants";
 
@@ -17,6 +18,7 @@ export const config: PlasmoCSConfig = {
     "https://x.com/*",
     "https://www.threads.net/*",
     "https://www.instagram.com/*",
+    "https://www.tiktok.com/*",
   ],
   all_frames: true,
 };
@@ -101,12 +103,16 @@ const App = () => {
       .with(SERVICE_TYPE.X, () => "X")
       .with(SERVICE_TYPE.THREADS, () => "Threads")
       .with(SERVICE_TYPE.INSTAGRAM, () => "Instagram")
+      .with(SERVICE_TYPE.TIKTOK, () => "TikTok")
       .exhaustive();
   }, [currentService]);
 
   return (
     <>
       <Modal open={isModalOpen} onClose={closeModal}>
+        {currentService !== SERVICE_TYPE.X && loading && (
+          <ServiceAlert serviceName={serviceName} />
+        )}
         <div className="flex flex-col gap-2 items-center">
           {loading && (
             <p className="text-lg font-bold">

src/contents/Profile.tsx

@@ -6,10 +6,16 @@ import { ProfileDetectedUserListItem } from "~components/ProfileDetectedUserList
 import { useProfileSearch } from "~hooks/useProfileSearch";
 import { getChromeStorage } from "~lib/chromeHelper";
 import { STORAGE_KEYS } from "~lib/constants";
+import { debugLog } from "~lib/utils";
+import { TikTokProfileService } from "~services/tikTokProfileService";
 import { XProfileService } from "~services/xProfileService";
 
 export const config: PlasmoCSConfig = {
-  matches: ["https://twitter.com/*", "https://x.com/*"],
+  matches: [
+    "https://twitter.com/*",
+    "https://x.com/*",
+    "https://www.tiktok.com/*",
+  ],
   all_frames: true,
 };
 
@@ -20,20 +26,33 @@ export const getStyle = () => {
   return style;
 };
 
+const getProfileService = () => {
+  const hostname = window.location.hostname;
+  if (hostname === "www.tiktok.com") {
+    return new TikTokProfileService();
+  }
+  return new XProfileService();
+};
+
 const Profile = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
   const { bskyUsers, searchUser, initialize, handleClickAction } =
     useProfileSearch();
   const [isLoading, setIsLoading] = React.useState(false);
 
   useEffect(() => {
-    const profileService = new XProfileService();
+    const profileService = getProfileService();
 
     const checkAndAddButton = async () => {
       const session = (
         await getChromeStorage(STORAGE_KEYS.BSKY_CLIENT_SESSION)
       )?.[STORAGE_KEYS.BSKY_CLIENT_SESSION];
       const hasSession = !!session;
+      debugLog({
+        hasSession,
+        isTargetPage: profileService.isTargetPage(),
+        hasSearchBlueskyButton: profileService.hasSearchBlueskyButton(),
+      });
 
       if (
         hasSession &&

src/hooks/useProfileSearch.ts

@@ -1,8 +1,6 @@
 import type { AtpSessionData } from "@atproto/api/dist/types";
 import React from "react";
 import { BskyServiceWorkerClient } from "~lib/bskyServiceWorkerClient";
-import { getChromeStorage } from "~lib/chromeHelper";
-import { STORAGE_KEYS } from "~lib/constants";
 import { fuzzySearchBskyUser } from "~lib/fuzzySearchBskyUser";
 import type { BskyUser, CrawledUserInfo, MatchType } from "~types";
 

src/hooks/useRetrieveBskyUsers.ts

@@ -10,6 +10,7 @@ import { searchBskyUser } from "~lib/searchBskyUsers";
 import { wait } from "~lib/utils";
 import { InstagramService } from "~services/instagramService";
 import { ThreadsService } from "~services/threadsService";
+import { TikTokService } from "~services/tikTokService";
 import { XService } from "~services/xService";
 import type {
   BskyUser,
@@ -39,6 +40,10 @@ const getServiceType = (messageName: MessageName): ServiceType => {
       MESSAGE_NAMES.SEARCH_BSKY_USER_ON_INSTAGRAM_PAGE,
       () => SERVICE_TYPE.INSTAGRAM,
     )
+    .with(
+      MESSAGE_NAMES.SEARCH_BSKY_USER_ON_TIKTOK_PAGE,
+      () => SERVICE_TYPE.TIKTOK,
+    )
     .run();
 };
 
@@ -51,6 +56,7 @@ const buildService = (
     .with(SERVICE_TYPE.X, () => new XService(messageName))
     .with(SERVICE_TYPE.THREADS, () => new ThreadsService(messageName))
     .with(SERVICE_TYPE.INSTAGRAM, () => new InstagramService(messageName))
+    .with(SERVICE_TYPE.TIKTOK, () => new TikTokService(messageName))
     .run();
 };
 

src/hooks/useSearch.ts

@@ -85,6 +85,10 @@ export const useSearch = () => {
         P.when((url) => TARGET_URLS_REGEX.INSTAGRAM.test(url)),
         () => MESSAGE_NAMES.SEARCH_BSKY_USER_ON_INSTAGRAM_PAGE,
       )
+      .with(
+        P.when((url) => TARGET_URLS_REGEX.TIKTOK.test(url)),
+        () => MESSAGE_NAMES.SEARCH_BSKY_USER_ON_TIKTOK_PAGE,
+      )
       .run();
 
     await setToChromeStorage(STORAGE_KEYS.BSKY_MESSAGE_NAME, messageName);