In this post, I’ll walk you through how I turned a Node.js script into a lightweight, GUI-powered Chrome extension for WhatsApp bulk messaging. No terminal. No setup pain. Just upload, type, and send.
Why This Project?
The original tool was a terminal-based Node.js script. It worked, but wasn’t user-friendly for non-technical users.
So I decided to make it accessible by turning it into a Chrome extension — giving it a simple visual interface and removing all dependency headaches.
🧩 Key Features
- CSV Upload to input contact numbers
- Personalized message templating (e.g., “Hi {name}”)
- Preview all messages before sending
- Automated sending through WhatsApp Web
- Works entirely client-side, with no server dependency
🚀 Extension UI – popup.html
<!-- popup.html -->
<input type="file" id="csvUpload" accept=".csv" />
<textarea id="messageInput" placeholder="Type your message here..."></textarea>
<button id="startSending">Send Messages</button>
This is the basic UI — clean and minimal. Users upload a CSV, type a message, and hit send.
📦 Parsing the CSV – popup.js
document.getElementById('csvUpload').addEventListener('change', function (e) {
const file = e.target.files[0];
Papa.parse(file, {
header: true,
complete: function (results) {
window.contacts = results.data;
console.log('Parsed Contacts:', window.contacts);
}
});
});
Using PapaParse, we convert the CSV file into a usable JS object. Each row becomes a message entry.
📬 Sending Messages via WhatsApp Web
async function sendMessage(contact, message) {
const encodedMsg = encodeURIComponent(message);
const phone = contact.phone.replace(/\D/g, '');
const url = `https://web.whatsapp.com/send?phone=${phone}&text=${encodedMsg}`;
window.open(url);
}
We open a WhatsApp Web tab prefilled with the message. You can even simulate keypresses or clicks for full automation with DOM selectors.
💡 Bonus: Personalizing Messages
function generateMessage(template, contact) {
return template.replace(/{name}/g, contact.name);
}
Let users type something like:
Hey {name}, just wanted to check in with you!
And this will automatically become:
Hey Anjali, just wanted to check in with you!
🛠️ Challenges Faced
- WhatsApp Web’s ever-changing DOM made targeting elements tricky — we had to use flexible selectors and sometimes fallbacks.
- Rate limits & user safety meant we added delays between sends, with control over timing in future versions.
🔗 Try It Out
Building a WhatsApp Bulk Messaging Chrome Extension
Check out the base code here:
GitHub Repo – WhatsApp Bulk Messaging Tool
The Chrome Extension release with full GUI is coming soon — stay tuned.
What’s Next
- Add basic send analytics (delivered, failed)
- Message queue control with delays and batching
- Allow template saving + CSV download example