飯魚 FanYu | 個人網站飯魚 FanYu | 個人網站
Meta 資訊處理工具

Meta 資訊處理工具

一個專為整理 Meta 帳號管理中心提供之可下載資料的工具網站。

TypeScriptNext.jsReactCSSFrontendJavaScriptGit / GitHubVercel
LicenseStarsForksIssuesLast commitCreated atRepo sizeCommit Activity/yLanguages/top

語言

  • TypeScript94.4%
  • CSS5.2%
  • JavaScript0.5%

Meta Information Tools

GitHub last commit GitHub commit activity GitHub Created At Deploy

基於 Next.js 的 Meta 帳號資料分析工具,協助整理 Instagram 與 Threads 可下載資訊。

線上版本: meta-infomation-tools.vercel.app


Overview

Meta Information Tools 是一套前端 Web 應用程式,專門處理從 Meta 帳號管理中心 下載的 Instagram 與 Threads 個人資料匯出檔(JSON 格式)。

Meta 官方提供的資料匯出以 ZIP 壓縮包形式交付,內含大量結構化 JSON 檔案。使用者若需分析粉絲追蹤關係、比對名單差異或查閱互動紀錄,往往需自行撰寫腳本或手動比對,效率低且容易出錯。

本專案透過瀏覽器端本地解析,提供圖形化介面與多種預設分析功能,讓使用者上傳 JSON 檔案後即可即時取得結果。所有資料處理均在瀏覽器本地完成,不會上傳至任何伺服器,也不會儲存使用者資訊。

適合對象:

  • 需要整理 Instagram / Threads 粉絲與追蹤名單的社群使用者
  • 想快速找出「尚未回追」或「尚未互追」帳號的使用者
  • 希望以視覺化表格檢視 Meta 匯出資料的開發者或進階使用者

Features

  • 粉絲追蹤比對:比較 Followers 與 Following 名單,篩選出尚未回追您、或您尚未回追的用戶
  • 互追名單分析:找出與您互相追蹤的帳號
  • 追蹤時間查詢:顯示您開始追蹤某用戶、或用戶開始追蹤您的詳細時間戳記
  • 名單差異比對:比較新舊粉絲名單,找出新增粉絲或退追用戶
  • 社交關係管理:查看摯友、封鎖名單、最近申請追蹤 / 取消追蹤的用戶
  • 互動紀錄瀏覽:支援按讚貼文、按讚留言、限時動態互動、珍藏內容等資料檢視(Instagram)
  • Threads 專屬功能:瀏覽過的串文、已關閉通知的串文、連結的應用程式與網站等
  • 完全本地運算:JSON 檔案僅在瀏覽器端讀取與解析,不涉及後端 API 或資料持久化

Tech Stack

類別技術
前端框架Next.js 15(App Router)
UI 函式庫React 19
語言TypeScript 5
UI 元件Ant Design 5
樣式CSS Modules / 全域 CSS
通知元件SweetAlert2
圖示@ant-design/iconsreact-icons
資料處理瀏覽器端 FileReader 本地 JSON 解析(無後端 API)
部署Vercel

Project Structure

text

重要目錄說明

目錄用途
frontend/src/app/Next.js App Router 路由定義,每個子目錄對應一個頁面
frontend/src/components/common/跨平台共用的 UI 元件,如檔案上傳區、資料表格
frontend/src/components/Instagram/Instagram 頁面專屬元件與功能方法對應表
frontend/src/components/Threads/Threads 頁面專屬元件與功能方法對應表
frontend/src/lib/資料型別定義與 JSON 解析、比對等核心邏輯

Getting Started

前置需求

  • Node.js 18.18 或以上
  • npm、yarn 或 pnpm

安裝與啟動

前端應用位於 frontend/ 目錄,請先進入該目錄再執行指令:

bash

開發環境

bash

啟動後開啟 http://localhost:3000。開發模式使用 Turbopack 加速熱更新。

建置

bash

Production 啟動

bash

其他指令

bash

Deployment

本專案部署於 Vercel,線上網址:https://meta-infomation-tools.vercel.app/

Vercel 部署步驟

  1. 將儲存庫連結至 Vercel 專案
  2. 設定 Root Directoryfrontend
  3. Framework Preset 選擇 Next.js
  4. Build Command:npm run build(預設)
  5. Output Directory:.next(預設)
  6. 部署完成後即可透過 Vercel 提供的網域存取

使用方式(資料來源)

  1. 前往 Meta 帳號管理中心
  2. 進入「你的資訊和權限」頁面
  3. 點擊「下載資訊」→「下載或轉移資訊」,依需求選擇要下載的檔案
  4. 收到資料準備完成的電子郵件後,下載 ZIP 檔案
  5. 解壓縮後,依頁面提示上傳對應的 JSON 檔案至本工具

Privacy

本網站僅提供本地資料分析功能,不會收集、儲存或傳輸任何使用者上傳的個人資料。所有運算均在您的瀏覽器中完成。


References


License

本專案採用 GNU General Public License v3.0(GPLv3)授權。

您可以自由使用、修改與散布本軟體,但修改後的版本亦須以相同授權條款釋出。詳細條款請參閱 LICENSE.txt

討論區