Step 4: Exporting the Chat List
Relevant source files
The following files were used as context for generating this wiki page:
This process, referred to as "Step 2: Get Your Chat List" in the project's main README.md, is a crucial prerequisite for using the web analysis tool. Its purpose is to extract a list of all your conversations from WhatsApp Web. The resulting file, model-storage-chat.json, allows the web application to map the chat identifiers found in the msgstore.db database to human-readable contact or group names.
Without this file, the analysis tool would be unable to display chat names, making it difficult to filter or identify conversations. The entire process is performed locally in the user's browser to ensure privacy.
Sources: README.md:39-51, web/src/Pages/SearchSQLite/index.jsx:32-37
Process Overview
The user must manually execute a JavaScript snippet in their browser's developer tools while on the WhatsApp Web page. This script accesses the browser's local IndexedDB storage, extracts the chat data, and triggers a download of the model-storage-chat.json file.
Sources: README.md:41-51
The following diagram illustrates the user-facing workflow for exporting the chat list.
The Export Script: dumbWAChats.js
This JavaScript file contains the logic for accessing and exporting the chat data from WhatsApp Web's underlying browser database.
Sources: chatsExporter/dumbWAChats.js
Core Logic
The script is designed to be run directly in the browser console. It targets the model-storage IndexedDB database used by WhatsApp Web and specifically reads all records from the chat object store. Once the data is retrieved, it is serialized into a JSON format and downloaded to the user's machine.
The following sequence diagram shows the internal function calls within the script upon execution.
Sources: chatsExporter/dumbWAChats.js:1-26
Key Functions
The script is composed of several small, asynchronous helper functions.
| Function | Description |
|---|---|
exportStore(dbName, storeName) | The main function that orchestrates the process of opening a database, getting all data from a store, and downloading it. |
openDB(dbName) | Opens a connection to the specified IndexedDB database. |
getAllFromStore(db, storeName) | Reads all records from a given object store within an open database transaction. |
downloadJSON(data, filename) | Converts the data array into a JSON Blob and creates a temporary link to trigger a file download in the browser. |
Sources: chatsExporter/dumbWAChats.js:1-24
Script Content
async function exportStore(dbName, storeName) {
const db = await openDB(dbName);
const data = await getAllFromStore(db, storeName);
downloadJSON(data, `${dbName}-${storeName}.json`);
db.close();
}
function openDB(dbName) {
return new Promise((resolve, reject) => {
const req = indexedDB.open(dbName);
req.onerror = reject;
req.onsuccess = () => resolve(req.result);
});
}
function getAllFromStore(db, storeName) {
return new Promise((resolve, reject) => {
const tx = db.transaction(storeName, "readonly");
const store = tx.objectStore(storeName);
const req = store.getAll();
req.onerror = reject;
req.onsuccess = () => resolve(req.result);
});
}
function downloadJSON(data, filename) {
const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
// 🔽 Run this in console with your DB name
exportStore("model-storage", "chat");
Sources: chatsExporter/dumbWAChats.js:1-26
Output File: model-storage-chat.json
The script produces a single JSON file named model-storage-chat.json. This file contains an array of objects, where each object represents a chat conversation.
Sources: README.md:51, chatsExporter/dumbWAChats.js:4
Data Structure
While the full schema is not defined, the web application's usage of the file reveals several key fields that are essential for its operation.
| Field | Type | Description |
|---|---|---|
id | string | The unique identifier for the chat (e.g., a phone number or group ID). This is used as the valueKey. |
name | string | The display name of the contact or group. This is used as the labelKey. |
type | string | Indicates the type of chat. A value of 'g' signifies a group chat. |
Sources: web/src/Pages/SearchSQLite/components/SearchStep.jsx:62-75
Integration with the Web Application
The model-storage-chat.json file is a required input for the web application's analysis feature.
Data Flow in the UI
- Upload: The user uploads the
model-storage-chat.jsonfile via the drag-and-drop interface in theUploadStepcomponent. - Processing: The
SearchSQLitemain component uses theuseFileUploadhook to handle the file. The JSON is parsed and stored in thechatListstate variable. - Consumption: The
chatListarray is passed as a prop to theSearchStepcomponent. - Filtering: Inside
SearchStep, aSelectPickercomponent is populated with thechatListdata, allowing the user to filter messages by a specific conversation. ThegetChatNameutility function later uses this list to resolve a chat ID to its name when constructing the SQL query.
Sources: web/src/Pages/SearchSQLite/index.jsx:32-37, 120-126, web/src/Pages/SearchSQLite/components/UploadStep.jsx:40-55, web/src/Pages/SearchSQLite/components/SearchStep.jsx:62-67, web/src/Pages/SearchSQLite/utils/queryBuilder.js:84-89, web/src/Pages/SearchSQLite/hooks/useMessageSearch.js:40
The following diagram shows how the chatList data flows between components.
Conclusion
Exporting the chat list via the dumbWAChats.js script is a simple but mandatory step that bridges the gap between the raw message data in msgstore.db and a user-friendly analysis experience. By providing a mapping of chat IDs to names, it enables powerful filtering and clear presentation of results within the web application, all while maintaining user privacy by keeping the data local.
Sources: README.md:39-40, 63-69