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

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.

其它

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

GitHub

View Github