Save Unknown WhatsApp Contacts A Guide To Javascript And Code Injection

July 11, 2025 by StackCamp Team 72 views

Save Name and Number of Unknown People from WhatsApp Web

In today's digital age, WhatsApp has become an indispensable communication tool for billions of people worldwide. Its user-friendly interface and end-to-end encryption make it a popular choice for personal and professional interactions. While WhatsApp's primary function is to connect individuals who know each other, there are situations where you might need to save the name and number of an unknown person. This can be particularly useful for businesses, customer service representatives, or anyone who frequently interacts with new contacts on the platform. This article delves into how you can achieve this using a custom Chrome extension and JavaScript code injection, providing a detailed guide and practical insights.

Understanding the Need

Before diving into the technical aspects, it's important to understand why saving unknown contacts is crucial. Imagine a scenario where you're a customer service agent using WhatsApp to communicate with clients. You might receive messages from individuals whose numbers aren't saved in your contacts. To provide efficient service, you need a way to quickly identify and save these contacts. Similarly, businesses using WhatsApp for marketing or sales can benefit from a method to capture and organize leads from unknown numbers. The ability to save names and numbers on WhatsApp Web can streamline communication, improve organization, and enhance productivity.

Overview of the Solution

This article explores a solution that involves creating a Chrome extension to add a custom button to WhatsApp Web. When clicked within a chatbox, this button triggers a JavaScript function (zap.js) that extracts the name and number from the selected contact details. The approach leverages code injection to interact with the WhatsApp Web interface, allowing for seamless data extraction. This method is particularly useful because WhatsApp Web, while feature-rich, does not natively offer an easy way to save contact information from unknown numbers directly from the chat interface. By creating a custom solution, users can significantly enhance their workflow and manage contacts more efficiently.

Prerequisites

To implement this solution effectively, you'll need a few prerequisites in place. First, a basic understanding of JavaScript is essential, as the core functionality relies on scripting to extract data from WhatsApp Web. Familiarity with HTML and CSS will also be helpful for creating the extension's user interface, though the provided code focuses primarily on JavaScript functionality. Additionally, you should have a working knowledge of Chrome extensions and how they function. This includes understanding manifest files, content scripts, and how to load an unpacked extension in Chrome. Access to WhatsApp Web is, of course, necessary, as the extension operates within this environment. Finally, a code editor such as VSCode, Sublime Text, or Atom will be needed to write and edit the code.

Step-by-Step Guide to Creating the Chrome Extension

Step 1: Setting up the Manifest File

The manifest file (manifest.json) is the blueprint of your Chrome extension. It tells Chrome about your extension's name, version, permissions, and the scripts it needs to run. Create a new directory for your extension and inside it, create a file named manifest.json. Populate it with the following code:

{
  "manifest_version": 3,
  "name": "WhatsApp Contact Saver",
  "version": "1.0",
  "description": "Adds a button to WhatsApp Web to save unknown contacts.",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://web.whatsapp.com/*"],
      "js": ["content.js"]
    }
  ],
  "web_accessible_resources": [{
    "resources": ["zap.js"],
    "matches": ["https://web.whatsapp.com/*"]
  }]
}

This manifest specifies that the extension requires permissions to access the active tab and inject scripts. It also defines a popup (popup.html), a background script (background.js), and a content script (content.js) that will run on WhatsApp Web. The web_accessible_resources section is crucial as it allows zap.js to be injected into the WhatsApp Web context.

Step 2: Creating the Popup HTML

The popup HTML (popup.html) provides the user interface for the extension. This is what users will see when they click the extension icon in the Chrome toolbar. Create a file named popup.html in your extension directory and add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>WhatsApp Contact Saver</title>
    <style>
        body {
            width: 200px;
            padding: 10px;
        }
        button {
            width: 100%;
            padding: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>WhatsApp Contact Saver</h1>
    <button id="injectButton">Inject Script</button>
    <script src="popup.js"></script>
</body>
</html>

This HTML sets up a simple popup with a title and a button labeled "Inject Script". When clicked, this button will trigger the injection of the zap.js script into WhatsApp Web. The popup.js script (which we'll create in the next step) will handle the button's click event.

Step 3: Implementing the Popup Script (popup.js)

The popup script (popup.js) handles the logic for the popup, specifically injecting the zap.js script into WhatsApp Web when the button is clicked. Create a file named popup.js and add the following code:

document.addEventListener('DOMContentLoaded', function() {
    const injectButton = document.getElementById('injectButton');
    injectButton.addEventListener('click', function() {
        chrome.scripting.executeScript({
            target: { tabId: chrome.tabs.getCurrent().then(tab => tab.id) },
            files: ['zap.js']
        }).then(() => {
            console.log("Injected zap.js");
        }).catch(error => console.error("Injection failed:", error));
    });
});

This script listens for the DOMContentLoaded event to ensure the DOM is fully loaded before attaching the click event listener to the button. When the button is clicked, it uses chrome.scripting.executeScript to inject zap.js into the currently active WhatsApp Web tab. The then and catch blocks handle the success and failure cases of the script injection, logging messages to the console.

Step 4: Writing the Content Script (content.js)

The content script (content.js) acts as an intermediary between the popup and WhatsApp Web. It listens for messages from the popup and triggers the injection of zap.js. Create a file named content.js and add the following code:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.message === "injectScript") {
        chrome.scripting.executeScript({
            target: { tabId: sender.tab.id },
            files: ['zap.js']
        }).then(() => {
            console.log("Injected zap.js via content script");
        }).catch(error => console.error("Injection failed:", error));
    }
});

This script listens for messages from the extension. If it receives a message with message set to injectScript, it injects zap.js into the tab that sent the message. This provides an alternative method for injecting the script, though in this example, the popup script directly injects zap.js.

Step 5: Implementing the Core Logic (zap.js)

The zap.js script contains the core logic for extracting the name and number from WhatsApp Web. This script is injected into the WhatsApp Web page and interacts with its DOM to retrieve the contact information. Create a file named zap.js and add the following code:

(function() {
    function getNameAndNumber() {
        // Add your logic here to extract name and number from WhatsApp Web
        // Example:
        let contactName = document.querySelector('span[title]').innerText;
        let contactNumber = document.querySelector('div[class*="_19RFN"] > span').innerText;

        if (contactName && contactNumber) {
            alert(`Name: ${contactName}, Number: ${contactNumber}`);
            // You can modify this part to save the data as needed
            console.log(`Name: ${contactName}, Number: ${contactNumber}`);
        } else {
            alert("Could not extract contact information.");
        }
    }

    // Create a button element
    const saveButton = document.createElement('button');
    saveButton.innerText = 'Save Contact';
    saveButton.style.position = 'fixed';
    saveButton.style.top = '100px';
    saveButton.style.right = '20px';
    saveButton.style.zIndex = '1000'; // Ensure it's on top of other elements
    saveButton.onclick = getNameAndNumber;

    // Append the button to the body
    document.body.appendChild(saveButton);

    console.log("zap.js injected and button added");
})();

This script defines a function getNameAndNumber that extracts the contact name and number from WhatsApp Web's DOM. It uses document.querySelector to select elements based on their CSS selectors. The extracted information is then displayed in an alert and logged to the console. You can modify this part to save the data to a different location, such as a local storage or a remote server. The script also creates a button labeled "Save Contact" and appends it to the WhatsApp Web page. When clicked, this button triggers the getNameAndNumber function.

Step 6: Creating the Background Script (background.js)

The background script (background.js) runs in the background and can listen for events or perform tasks even when the extension's popup is not open. In this case, it's not strictly necessary, but it's a good practice to include it for future functionality. Create a file named background.js and add the following code:

console.log("Background script loaded");

This script simply logs a message to the console when it's loaded. You can add more complex logic to this script as needed.

Step 7: Adding Icons

To give your extension a professional look, you can add icons. Create an images directory in your extension folder and add three icons named icon16.png, icon48.png, and icon128.png. These icons will be used in the Chrome toolbar and extension management page.

Step 8: Loading the Extension in Chrome

Open Chrome and navigate to chrome://extensions/.
Enable "Developer mode" in the top right corner.
Click "Load unpacked" and select your extension directory.

Your extension should now be loaded and visible in the Chrome toolbar. Navigate to WhatsApp Web, open a chat, and click the "Inject Script" button in the extension popup. The "Save Contact" button should appear on the page, and clicking it will display the contact name and number.

Code Injection Techniques

Code injection is a powerful technique that allows you to insert and execute custom JavaScript code within the context of a webpage. In the context of Chrome extensions, this is typically achieved using content scripts or by directly injecting scripts using the chrome.scripting.executeScript API. Understanding how code injection works is crucial for creating extensions that interact with web pages like WhatsApp Web.

Content Scripts

Content scripts are JavaScript files that run in the context of a specific webpage. They have access to the page's DOM and can modify it or extract data. In the manifest file, you specify which pages the content script should run on using the matches property. When a user navigates to a matching page, the content script is automatically injected. Content scripts are ideal for tasks that need to be performed on specific pages, such as adding custom UI elements or modifying the page's behavior.

Direct Script Injection

Direct script injection involves using the chrome.scripting.executeScript API to inject JavaScript code into a webpage. This method provides more control over when and how the script is injected. For example, you can inject a script in response to a user action, such as clicking a button in the extension's popup. Direct script injection is useful for tasks that need to be performed on demand or in response to specific events.

Security Considerations

While code injection is a powerful tool, it's important to be aware of the security implications. Injecting malicious code into a webpage can have serious consequences, such as stealing user data or compromising the page's functionality. Therefore, it's crucial to ensure that the code you're injecting is safe and doesn't introduce any security vulnerabilities. Always review and test your code thoroughly before deploying it.

Analyzing the JavaScript Code (zap.js)

The zap.js script is the heart of the extension, responsible for extracting the contact name and number from WhatsApp Web. Let's break down the code to understand how it works.

DOM Traversal

The script uses document.querySelector to select elements in the WhatsApp Web DOM. This function allows you to select elements based on CSS selectors. For example, document.querySelector('span[title]') selects the first <span> element with a title attribute, which typically contains the contact name. Similarly, document.querySelector('div[class*="_19RFN"] > span') selects a <span> element inside a <div> with a class name that contains _19RFN, which usually contains the contact number. These selectors are specific to WhatsApp Web's DOM structure, and may need to be updated if WhatsApp Web changes its layout.

Extracting Contact Information

Once the elements are selected, the script extracts the contact name and number using the innerText property. This property returns the text content of an element, which in this case is the contact name and number. The script then displays the extracted information in an alert and logs it to the console. You can modify this part of the code to save the data to a different location, such as a local storage or a remote server.

Adding a Button to the Page

The script also creates a button element and appends it to the WhatsApp Web page. This button provides a user-friendly way to trigger the contact information extraction. The button is styled with CSS to position it in a fixed location on the page and ensure it's on top of other elements. When the button is clicked, it calls the getNameAndNumber function to extract and display the contact information.

Potential Challenges and Solutions

Developing a Chrome extension to interact with a dynamic web application like WhatsApp Web can present several challenges. WhatsApp Web's DOM structure may change with updates, potentially breaking the extension's functionality. To mitigate this, it's important to use robust CSS selectors that are less likely to be affected by changes. Regularly testing the extension and updating the selectors as needed is also crucial.

Rate Limiting

Another potential challenge is rate limiting. If the extension makes too many requests to WhatsApp Web in a short period, WhatsApp may block the extension. To avoid this, it's important to implement rate limiting in the extension's code. This can be done by adding delays between requests or by limiting the number of requests that can be made in a given time period.

Security Risks

Security is another important consideration. Extensions that inject code into web pages can be vulnerable to security risks if not properly designed. It's important to ensure that the extension's code is safe and doesn't introduce any vulnerabilities. This includes validating user input, sanitizing data, and avoiding the use of insecure APIs.

Solutions

To address these challenges, consider the following solutions:

Use Robust Selectors: Employ CSS selectors that target specific elements based on their attributes or roles, rather than relying on class names that might change.
Implement Rate Limiting: Add delays or limits to the number of requests made to WhatsApp Web to avoid being blocked.
Regularly Test and Update: Monitor the extension's performance and update the code as needed to adapt to changes in WhatsApp Web's DOM structure.
Prioritize Security: Ensure the extension's code is secure by validating input, sanitizing data, and avoiding insecure APIs.

Use Cases and Applications

The Chrome extension described in this article has various practical applications, particularly for businesses and individuals who frequently interact with new contacts on WhatsApp Web. Here are some use cases:

Customer Service

Customer service representatives can use the extension to quickly save the contact information of new customers who reach out via _WhatsApp. This allows them to easily follow up with customers and provide personalized service.

Sales and Marketing

Sales and marketing teams can use the extension to capture leads from WhatsApp conversations. By quickly saving the contact information of potential customers, they can add them to their CRM and nurture them through the sales funnel.

Personal Use

Individuals can use the extension to save the contact information of new acquaintances or business contacts they meet on WhatsApp. This makes it easier to stay in touch and build relationships.

Automation and Integration

The extension can also be used as a building block for more complex automation and integration workflows. For example, it can be integrated with other tools and services to automatically save contacts to a CRM or other database.

Conclusion

Creating a Chrome extension to save names and numbers from WhatsApp Web can significantly enhance productivity and streamline communication. By leveraging JavaScript code injection, you can interact with WhatsApp Web's DOM_ and extract the necessary information. This article provided a step-by-step guide to building such an extension, along with insights into code injection techniques, DOM traversal, and potential challenges. Whether you're a business professional, customer service representative, or individual user, this extension can help you manage contacts more efficiently and make the most of WhatsApp Web's capabilities_.