Skip to content

Yukaii/messenger-JSON-viewer

Repository files navigation

Facebook Messenger exported JSON viewer

Messenger Viewer

messenger-viewer

What's this?

This is a simple tool to view Facebook Messenger exported JSON files. I made the UI into a Messenger clone, just for fun and to see what Tailwind CSS can do. Another reason is that I want to try out the File System Access API, knowing that it can be used to access the file in a folder just in the browser.

Technical Stack

How to use

  1. Open the Tool
  2. Click the Button and select the folder you downloaded from Facebook. start-screen

    The contents of the folder should look like this folder

  3. Wait a few seconds, sometimes it takes one minute to load.
  4. Tada! offline-viewer

Features

Simple statistic

statistic

View chatroom just as what you can do on Messenger

offline-viewer

Window Controls Overlay as PWA (actually not a feature :p)

wco

Development (Running locally)

Before you start, make sure you have Node.js and Yarn installed.

First, clone the repository:

git clone https://github.com/Yukaii/messenger-JSON-viewer.git

Then, install the dependencies:

cd messenger-JSON-viewer
yarn install

Finally, run the development server:

yarn dev

The server should be running at http://localhost:3000.

TODOs

If they should be done, then they will be done.

  • Image type message
  • Link
  • Reactions
  • Stickers
  • Subscribe/Unsubscribe events
  • Attachments
  • Photos View
  • Calendar to jump to specific date
  • Date
    • Sent at for each message
    • Date/Time separator
  • Info Panel
    • Statistic
      • message count (from both side)

Previous works

Credits

The application icon is modified from Heroicons.

其它

翻閱數年前的訊息實在是不忍直視......