Read WhatsApp Web DOM Elements Using Chrome Extension

A Chrome extension gives Image Paths and Captions of Images which are posted in a WhatsApp Group.

Writing a Chrome extension can be a bit tricky initially, due to its API and the way you have to structure your code. 

In this post, I want to show how you can write a simple extension that reads the Dom Elements of the WhatsApp Web page once it’s loaded. The whole lot is in Javascript, which gives you easy access to the DOM.

Features of Chrome Extension (Information Display in Console)

• Image Paths are displayed.
• Image Captions are displayed.
• The Image who has no caption to display, for that "No Caption" Text is displayed.
• Image Paths and Captions are displayed in a consecutive manner. So that End User can easily find out the Caption with respect to the Image.

Architecture of an Extension

• Background page - not visible by the user. A long running script that handles the state of your extension. Communicates with other parts of the extension with messaging.
• Event page - the same as a background page, but only executes in response to events you define. Preferred to background pages as they are less resource intensive.
• Options page - UI page that allows a user to set options. An HTML page that references javascript files.
• Browser actions/page actions - an icon either in the extension bar or the Omnibox respectively. Clicking on the icon will show an UI tab which is an HTML page that can reference javascript. These pages cannot communicate with the website resources/DOM, it needs to message the content script to do that.
• Content scripts - javascript only. What is used to modify the page itself? The only part that can access and modify the DOM but not code loaded by the website. Files are run once for each page that matches the manifest. All the JS files in the list are loaded so you can use libraries just by including it. This is what we’ll use for our extension.

There are plenty more elements that can be used in an extension, but this list covers the core that will get most of your extension built and most other parts are for specific tasks.

Permissions

When users see ‘This extension can see and modify data on all pages’, they get nervous. So it’s best to limit where your extension will be active by explicitly setting permissions in the manifest.

You’ll also need to specify what pages your content scripts will match and run on. 

[manifest.json]

"permissions": [

    "tabs", "http://www.google.com/*"

  ],

Writing your own extension

Let’s start with the manifest. We need to state which version it is, if you’re uploading a new version to the web store, the version number must be greater than the existing one. Don’t confuse this with the manifest_version, which is always 2 and is not extension specific.

Create a new folder called ‘WhatsAppWeb’ then a new file called ‘manifest.json’ inside it and copy the following into it.

[manifest.json]

{   "manifest_version": 2,

     "name": "WhatsAppWeb",

    "description": "This extension gives Image Paths and Captions of Images which was Posted in a WhatsApp Group.",

    "version": "1.1",

    "icons": {

    "16": "daisy_16.png",

    "48": "daisy_48.png",

    "128": "daisy_128.png"

    },

    "content_scripts": [

        {"matches": ["https://web.whatsapp.com/*"],

            "js": ["jquery-2.2.0.min.js", "whatsappweb.js"],

            "run_at": "document_end" } ] 

}

You must supply 3 icons in sizes 16, 48 and 128 px. These are used on the extension page and the toolbar.

You can now load your extension into Chrome. Go to Window -> Extensions to open the extensions page. Tick developer mode on the top right which allows you to load your own extensions. Click the ‘Load unpacked extension’ button and then select the ‘WhatsAppWeb’ directory. You should now have something that looks like this:

To modify a page we need a content script. Now save a new file called whatsappweb.js and the following as the content:

[whatsappweb.js]

document.addEventListener("DOMNodeInserted", function (event) {

    var tempHTML = "<html>" + $("html").html() + "</html>";

    loadData();

});

function loadData() {

    var images = [];

    var caption = [];

    

    $("#main .message-list .msg .bubble-image img").each(function () {

        images.push($(this).attr('src'));

    })

    console.log(images);

    

    $("#main .message-list .msg .bubble-image").each(function (i) {

        if ($(this).children('.image-caption').length > 0 &&      $(this).children('.image-caption').length !== 'undefined') 

 {

         caption.push($(this).children('.image-caption').children('.emojitext').text());

        } 

        else {

          caption.push("No Caption");

        }

    })

    console.log(caption);

}

Go back to the extensions page and hit reload or press Ctrl + R (this is very important. If you ever wonder why nothing changed even though you updated the code this is probably the reason).

Go to a WhatsApp Web. Use WhatsApp on your phone to scan the code. Once you have done with it, your WhatsApp screen will be visible on your Desktop/Laptop Screen. 

Create a dummy group says for example "Test", add some participants in it. Now post a couple of images with captions as well as without captions in the same group. Ask Group Participants to post the same. 

Now press an F12 key, go to Console Tab. You get the following output.

Image Paths and Captions are displayed in a sequential manner. So that End User can easily find out the Caption with respect to the Image.

In this way, you can read WhatsApp Web Dom Elements Using Chrome Extension. I am attaching Source Code for your reference.

Source Code

Happy learning..:)