We love to share as much as we like to find answers to some of the interesting problems that we work on.

We have on our side a team of Industry Veterans, Domain Experts, Proficient Business Consultants and Competent Technologists, who have fascinating minds and captivating ideas.

We share what we think and what we feel...

Welcome to the Fulcrum Worldwide blog! See what's happening in the world of IT/Fulcrum, right now!

Back

Chrome Extension for Reading WhatsApp Web DOM

Free Chrome Extension for reading WhatsApp Web DOM

 

Here's a cool Chrome extension that gives the user image paths and captions of images posted in a WhatsApp Group. 

 

Writing a Chrome extension can be a little tricky initially, due to its API and the way you have to structure your code. This blog post is to help you write a simple extension that reads the DOM elements of a WhatsApp Web page, once it’s loaded. The entire extension 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.
  •  Images without captions display the text "No Caption".
  •  Image paths and captions are displayed in a consecutive manner. With this information, the end user can easily find the caption associated to each image.

Architecture of an Extension

  • Background page - The background page is not visible to the user. This is a long running script that handles the state of the extension. The background page communicates with other parts of the extension with messaging.
  • Event page - The event page is the same as a background page, but only executes in response to events you define. Event pages are preferred to background pages as they are less resource intensive.
  • Options page - The options page is a UI page that allows a user to set options. It is an HTML page that references JavaScript files.
  • Browser actions/page actions - The browser actions page is an icon in the extension bar. Clicking on the icon will open an HTML page in a new tab. This HTML page is used to reference the JavaScript.
  • Content scripts - Content scripts are JavaScripts, used to modify the HTML page itself. They are the only part of the extension that can access and modify the DOM outside of the code loaded by the website. Files are run once for each page that matches the manifest. All of the JavaScript files in the list are loaded so you can use libraries just by including the content scripts file. This is what we’ll use for our extension.

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

Permissions

When users see ‘This extension can see and modify data on all pages’, they get nervous. Therefore, 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.

Code Snippet

[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.

Code Snippet

[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 the following sizes: 16px , 48px and 128px. 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. Check developer mode on the top right, which allows you to load your own extensions. Click on ‘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 the content script. Now, save a new file called whatsappweb.js and the following as the content:

Code Snippet

[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);

}

Next, 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 WhatsApp Web. Use WhatsApp on your phone to scan the code. Once synced, your WhatsApp screen will be visible on your Desktop/Laptop Screen.

Create a dummy group "Test" and add some participants to it. Now post a couple of images with captions, and some without captions as well, in the same group. Ask group participants to do the same.

Thereafter, press F12 to go to Console Tab. You get the following output.

 

 

Image Paths and Captions are displayed sequentially, so the end-user can easily find the captions associated with respective images.

In this way, you can read WhatsApp Web Dom Elements using Chrome Extension. Should you have any queries or need the Source Code, please drop a word in the comments section below.

Happy learning!

By Parth Dave
Ix Developer, Fulcrum Worldwide

Comments
Trackback URL: